Module in TypeScript importieren

1. Erstellen Sie ein TypeScript-Projekt
2. Verwenden Sie das Schlüsselwort export in TypeScript
3. Verwenden Sie das Schlüsselwort import in TypeScript
4. Exportieren und importieren Sie ein einzelnes Objekt in TypeScript
5. Exportieren und importieren Sie mehrere Objekte in TypeScript
6. Abschluss

Wenn wir lernen, Anwendungen mit TypeScript zu entwickeln, erstellen wir normalerweise sehr einfache Programme, die oft keine Abhängigkeiten voneinander haben.

Beispielsweise besteht ein Programm zum Protokollieren einer Nachricht an der Konsole aus nur einer Zeile und ist in einer Datei enthalten. Produktionsanwendungen enthalten jedoch mehrere Dateien, und diese Dateien enthalten Code mit Abhängigkeiten.

Der Entwickler kann diese Abhängigkeiten implementieren oder sie mithilfe der TypeScript-Module aus einer Bibliothek eines Drittanbieters erwerben. Die TypeScript-Dokumentation definiert ein Modul als jede Datei, die einen import oder export auf oberster Ebene enthält.

Jede Datei, die keinen import oder export auf oberster Ebene enthält, bedeutet, dass der Code außerhalb der Datei nicht zugänglich ist; andernfalls ist der Gültigkeitsbereich des Codes global.

Erstellen Sie ein TypeScript-Projekt

Öffnen Sie WebStorm IDEA und wählen Sie Datei > Neu > Projekt. Wählen Sie im sich öffnenden Fenster auf der linken Seite Node.js und ändern Sie im sich öffnenden Fenster auf der rechten Seite mit der Bezeichnung New Project den Projektnamen von untitled in typescript-modules im Projekt Standort Abschnitt.

Drücken Sie abschließend die Schaltfläche Erstellen, um das Projekt zu generieren. Sobald sich das Fenster öffnet, öffnen Sie ein neues Terminal-Fenster, indem Sie Ansicht > Werkzeugfenster > Terminal wählen oder die Tastenkombination Alt+F12 verwenden.

Verwenden Sie den folgenden Befehl, um eine tsconfig.json-Datei für die Anwendung zu erstellen.

~/WebstormProjects/typescript-modules$ tsc --init

Nachdem Ihre Datei generiert wurde, stellen Sie sicher, dass die Konfiguration in der Datei wie unten gezeigt ist. Wir können die Konfiguration auch kopieren und in die Datei tsconfig.json einfügen.

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "noEmitOnError": true

    }
}

Verwenden Sie das Schlüsselwort export in TypeScript

Erstellen Sie eine Datei namens EmailService.ts im Ordner typescript-modules und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

In dieser Datei haben wir zwei Klassen namens User und EmailService erstellt. Die Methode sendEmail() simuliert das Versenden einer E-Mail.

Die sendEmail()-Methode verwendet die User-Klasse, um den Benutzer darzustellen, der die E-Mail-Nachricht sendet und empfängt. Da wir möchten, dass die Klassen außerhalb der Datei zugänglich sind, haben wir jeder Klasse das Schlüsselwort export vorangestellt.

Verwenden Sie das Schlüsselwort import in TypeScript

Erstellen Sie eine Datei namens Main.ts und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

import {User, EmailService} from "./EmailService"

function main(){
    let thisService = new EmailService();
    console.log(thisService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

In dieser Datei haben wir eine Funktion namens main() erstellt, die den von der Methode sendEmail() zurückgegebenen String an die Konsole protokolliert.

Die Methode akzeptiert drei Parameter: to, from und message und stellt fest, dass die ersten beiden Parameter vom Typ User sind.

Um diesen Code auszuführen, verwenden Sie die in diesem Tutorial erwähnten Schritte, um ein neues Terminalfenster zu öffnen, kopieren Sie den folgenden Befehl, fügen Sie ihn in das Terminal ein und drücken Sie Enter.

~/WebstormProjects/typescript-modules$ tsc && node Main.js

Dieser Befehl transpiliert die TypeScript-Dateien in JavaScript-Dateien und führt die Datei Main.js mit der Laufzeitumgebung node aus. Stellen Sie sicher, dass die Ausgabe der Anwendung wie unten gezeigt ist.

message: Happy Birthday from: doe to: john

Exportieren und importieren Sie ein einzelnes Objekt in TypeScript

Erstellen Sie eine Datei namens User.ts und schneiden Sie die Klasse User in der Datei EmailService.ts in die Benutzerdatei. Ändern Sie den Code in der Benutzerdatei wie unten gezeigt.

class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

export = User

In diesem Code haben wir das Schlüsselwort export aus der Klassendeklaration entfernt und es mit der Anweisung export = User nach der Klassendeklaration definiert. Dies zeigt, dass wir ein einzelnes Objekt aus diesem Modul exportieren, das eine Klasse ist.

Da der EmailService auch ein einzelnes Objekt exportieren soll, entfernen Sie das Schlüsselwort export aus der Klasse und fügen es nach der Klassendeklaration hinzu, wie unten gezeigt.

import User = require("./User");

class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

export = EmailService

Da die Klasse EmailService das Objekt User verwendet, müssen wir es mit der Funktion require() in die Klasse importieren. Beachten Sie, dass wir auf diese Weise ein einzelnes Objekt aus einem Modul importieren.

Ein weiterer zu beachtender Punkt ist, dass wir bei diesem Importansatz die Klasse direkt mit dem Schlüsselwort new aufrufen können, da das zu importierende Objekt eine Klasse ist, und dasselbe gilt für Funktionen, Schnittstellen und andere.

Um zu testen, ob die von uns vorgenommenen Änderungen wie erwartet funktionieren, verwenden wir die Datei Main.ts mit einigen geringfügigen Änderungen an den import-Anweisungen, wie unten gezeigt.

import EmailService = require("./EmailService")
import User = require("./User")

function main(){
    let newService = new EmailService();
    console.log(newService.sendEmail(
        new User("john"),
        new User("doe"),
        "Happy Birthday"));
}
main();

Die einzigen Änderungen, die wir in dieser Datei vorgenommen haben, sind die Verwendung der Funktion require() zum Importieren der einzelnen Objekte aus den Modulen User.ts und EmailService.ts.

Führen Sie die Anwendung mit demselben Befehl aus, den wir im vorherigen Beispiel verwendet haben, und stellen Sie sicher, dass die Ausgabe wie unten gezeigt ist.

message: Happy Birthday from: doe to: john

Exportieren und importieren Sie mehrere Objekte in TypeScript

Ändern Sie die vorherigen Beispiele, um die Anweisungen export und import wie im ersten Beispiel zu verwenden. Entfernen Sie den Export einzelner Objekte und importieren Sie alle drei Dateien, die EmailService.ts und User.ts enthalten.

Stellen Sie sicher, dass der Code für die beiden Dateien wie unten gezeigt ist.

Benutzer.ts:

export class User{
    constructor(private name: String) {
        this.name = name
    }

    public toString(): String{
        return this.name
    }

}

EmailService.ts:

import {User} from "./User";

export class EmailService {
    sendEmail(to: User,
              from: User,
              message: String): String {
       return `message: ${message} from: ${from} to: ${to}`;
    }
}

Erstellen Sie eine Datei mit dem Namen AllExports.ts im Ordner typescript-modules und kopieren Sie den folgenden Code und fügen Sie ihn in die Datei ein.

export * from "./EmailService"
export * from "./User"

In dieser Datei exportieren wir alle Mitgliedsklassen, Schnittstellen und Funktionen, die in den Dateien EmailService.ts und User.ts exportiert wurden. Beachten Sie, dass wir Klassen in diese Datei exportieren, da das Modul nur Klassendeklarationen enthält.

Wir werden dieses Modul verwenden, um alle in der Datei Main.ts deklarierten Module mit einer einzigen import-Anweisung zu importieren. Um dies zu erreichen, stellen Sie sicher, dass der Dateicode Main.ts wie unten gezeigt ist.

import * as emailManager from "./AllExports"

function main(){
    let newService = new emailManager.EmailService();
    console.log(newService.sendEmail(
        new emailManager.User("john"),
        new emailManager.User("doe"),
        "Happy Birthday"));
}
main();

Beachten Sie, wie wir alle in der Datei AllExports.ts definierten Module mit der Syntax * as importieren. Das Sternchen * weist den Compiler an, alle Exporte in der Datei zu importieren, während das Schlüsselwort as einen benutzerdefinierten Objektnamen für importierte Exporte erstellt.

Wir haben das Objekt in den vorherigen Beispielen mit dem Schlüsselwort new aufgerufen. Dies wird in diesem Beispiel jedoch nicht funktionieren.

Um auf die Mitgliedsdetails des Objekts zuzugreifen, müssen wir den Punkt . des Objekts verwenden. Operator, um auf sie zuzugreifen, was in unserem Fall die Klassen EmailService und User sind.

Wenn wir versuchen, das Schlüsselwort new für das Objekt emailManager zu verwenden, erhalten wir die Warnung This expression is not constructable. Führen Sie diesen Code aus und stellen Sie sicher, dass die Ausgabe wie unten gezeigt ist.

message: Happy Birthday from: doe to: john

Abschluss

In diesem Tutorial haben wir gelernt, wie man mit Modulen in TypeScript arbeitet. Zu den behandelten Themen gehören die Verwendung der Schlüsselwörter export und import sowie das Exportieren und Importieren einzelner und mehrerer Objekte.