Type-Feature von TypeScript importieren

1. Definieren Sie benutzerdefinierte Typen in TypeScript
2. Verwenden Sie Typ importieren, um die benutzerdefinierten Typen in TypeScript zu importieren

TypeScript ist eine Programmiersprache, die hauptsächlich zur Entwicklung von Webanwendungen verwendet wird und eine Obermenge von JavaScript ist.

Die Sprache wird hauptsächlich mit Frameworks wie Angular verwendet. TypeScript hat primitive und nicht primitive Datentypen, die wir beim Programmieren nutzen können.

Die Entwicklung von Anwendungen, die benutzerdefinierte Typen definieren, ist normalerweise unvermeidlich. Diese benutzerdefinierten Typen sind für die Verwendung in anderen Anwendungsmodulen definiert.

In diesem Tutorial erfahren Sie, wie Sie diese benutzerdefinierten Typen in unsere Module integrieren. Diese benutzerdefinierten Typen können mit den Methoden Typ importieren und import in die Anwendung aufgenommen werden.

Die nächste Phase behandelt diese Methoden im Detail.

Definieren Sie benutzerdefinierte Typen in TypeScript

Gehen Sie zu Ihrer Visual Studio Code-Software und erstellen Sie einen neuen Ordner mit dem Namen export-import-type oder verwenden Sie einen beliebigen Namen.

Erstellen Sie unter dem Ordner eine Datei mit dem Namen foo.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export type Employee = {
    firstName: string
    lastName: string
    email: string
}

export function logEmployee(employee: Employee){
    return employee;
}

export type Account = {
    username: string
    password: string
}

export function logAccount(account: Account){
   return account
}

Im Folgenden sind die benutzerdefinierten Typen aufgeführt, die in der Datei foo.ts definiert sind. Alle benutzerdefinierten Typen verwenden das Schlüsselwort export, um anzuzeigen, dass ein anderes Modul außerhalb ihrer Datei auf sie zugreifen kann.

Der Typ Employee definiert drei Eigenschaften: firstName, lastName und email. Die Methode logEmployee() akzeptiert einen Parameter vom Typ Employee und protokolliert die Mitarbeiterdetails in der Konsole.

Der Typ Konto definiert zwei Eigenschaften Benutzername und Passwort. Die Methode logAccount() akzeptiert einen Parameter vom Typ Account und protokolliert die Kontodetails in der Konsole.

Verwenden Sie Typ importieren, um die benutzerdefinierten Typen in TypeScript zu importieren

Erstellen Sie im selben Ordner eine Datei mit dem Namen bar.ts. Kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import type {Employee, Account} from "./foo"
import {logEmployee, logAccount} from "./foo"

function logEmployeeTwice(employee: Employee){
    console.log(logEmployee(employee))
    console.log(logEmployee(employee))
}

let employee: Employee ={
    firstName: "david",
    lastName: "mbochi",
    email: "david@gmail.com"
}

logEmployeeTwice(employee)

function logUserAccount(account: Account){
    console.log(logAccount(account))
}

let account: Account={
    username: "johndoe",
    password: "@john123"
}

logUserAccount(account)

Im obigen Code haben wir den Ansatz Typ importieren verwendet, um die Deklarationen zu importieren, die wir für Typdeklarationen und Anmerkungen verwenden können.

Wir haben den import-Ansatz verwendet, um die Wertelemente zu importieren. Dies ist die Standardkonvention, die für die beiden Methoden verwendet werden sollte.

Wenn Sie versuchen, Importtyp für die Wertelemente zu verwenden, erhalten Sie die folgende Fehlermeldung.

import type {logEmployee, logAccount} from "./foo"

Fehler:

'logEmployee' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 14): 'logEmployee' was imported here.

'logAccount' cannot be used as a value because it was imported using 'import type'.ts(1361)
bar.ts(2, 27): 'logAccount' was imported here.

Generieren Sie mit dem folgenden Befehl eine tsconfig.json-Datei, um TypeScript-Konfigurationen hinzuzufügen.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc init

Stellen Sie sicher, dass die generierte Datei tsconfig.json die folgenden Konfigurationseigenschaften aufweist.

{
    "compilerOptions":{
        "target": "es5",
        "noEmitOnError":true
    }
}

Verwenden Sie den folgenden Befehl, um alle TypeScript-Dateien in JavaScript zu transpilieren.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ tsc

Verwenden Sie den folgenden Befehl, um die Datei bar.js mit node auszuführen.

david@david-HP-ProBook-6470b:~/Documents/export-import-type$ node bar.js

Ausgang:

{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ firstName: 'david', lastName: 'mbochi', email: 'david@gmail.com' }
{ username: 'johndoe', password: '@john123' }