TypeScript-Modulsystem

Das Modulsystem ist die Grundlage der modernen TypeScript-Entwicklung.

TypeScript unterstützt die ES-Modul-Syntax vollständig und bietet umfangreiche Modulauflösungsstrategien.

Durch das Modulsystem kann Code in wiederverwendbare Einheiten aufgeteilt werden, was Codeorganisation und -wiederverwendung ermöglicht.

SVG-Diagramm: Modul-Export/-Import Background Title Module Export/Import Flow user.ts Module user.ts export const name = "Alice" export class User { ... } export interface Config { ... Arrow import main.ts Module main.ts import { name, User } from "./user"; import User from "./user" Arrow use Runtime Output JavaScript Execute Code Lower Section: Export Types Export/Import Methods Method 1 Named Export/Import Method 2 Default Export/Import Method 3 Re-export Method 4 Dynamic Import Arrow Marker

Warum brauchen wir ein Modulsystem?

Mit zunehmender Projektgröße steigt die Codemenge.

Die Verteilung von Code auf mehrere Dateien und die Organisation durch Module verbessert die Wartbarkeit und Wiederverwendbarkeit von Code.

Das Modulsystem gibt jeder Datei einen eigenen Gültigkeitsbereich und verhindert so globale Variablenverschmutzung.

Konzepterklärung:Ein Modul ist eine TypeScript-Datei, die export- und import-Anweisungen enthält. Inhalte werden über export exportiert und über import importiert.

Modul-Export

Verwenden Sie das Schlüsselwort export, um Variablen, Funktionen, Klassen, Schnittstellen usw. für die Verwendung durch andere Module zu exportieren.

user.ts-Modul

// Variable exportieren
export var name = "Alice";
export const age = 25;

// Funktion exportieren
export function greet(message: string): string {
    return "Hallo, " + message;
}

// Klasse exportieren
export class User {
    // Parameter-Eigenschaften des Konstruktors
    constructor(public name: string) {}

    // Methode zur Selbstvorstellung
    introduce(): string {
        return "Ich bin " + this.name;
    }
}

// Interface exportieren (Interfaces verschwinden nach der Kompilierung; werden nur für die Typprüfung verwendet)
export interface Config {
    // Host konfigurieren
    host: string;
    // Port konfigurieren
    port: number;
}

// Batch-Export: Exporte umbenennen
export { name as userName, age as userAge };

Hinweis:Interfaces und Typen erzeugen keinen tatsächlichen Code in kompiliertem JavaScript; sie werden nur für die TypeScript-Typprüfung verwendet.

Modulimport

Verwende das Schlüsselwort import, um exportierte Inhalte aus anderen Modulen zu importieren.

main.ts Modul importieren

// Benannter Import: bestimmten Inhalt aus einem Modul importieren
import { name, age, greet } from "./user";

// Standardimport: den Standardexport eines Moduls importieren
import User from "./user";

// Alle importieren: alle Modul-Exporte in ein Objekt legen
import * as UserModule from "./user";

// Import umbenennen: Namenskonflikte vermeiden
import { greet as sayHello } from "./user";

// Importierten Inhalt verwenden
console.log(greet("World"));
console.log(sayHello("TypeScript"));

Ausgabe:

Hello, World
Hello, TypeScript

Pfaderklärung:Importpfade können relative Pfade sein (z. B.,./user) oder absolute Pfade (z. B.,@/utils）。

Standardexport

Jedes Modul kann einen Default-Export haben.

Default-Exporte erfordern beim Importieren keine geschweiften Klammern und können beliebig benannt werden.

math.ts-Modul

// Default-Export: Ein Modul kann nur einen Default-Export haben
export default function add(a: number, b: number): number {
    return a + b;
}

// Kann mit anderen Exporten gemischt werden
export function multiply(a: number, b: number): number {
    return a * b;
}

main.ts-Import

// Default-Export importieren: beliebiger Name kann verwendet werden
import add from "./math";

// Benannten Export importieren: erfordert geschweifte Klammern
import { multiply } from "./math";

console.log("Addition: " + add(2, 3));
console.log("Multiplikation: " + multiply(4, 5));

Ausgabe:

加法: 5
乘法: 20

Empfehlung:Verwenden Sie Default-Exporte für den Hauptexportinhalt wie Utility-Funktionen und Klassen; verwenden Sie benannte Exporte für Hilfsfunktionen, Schnittstellen usw.

Re-Export

Re-Export wird verwendet, um Inhalte aus mehreren Modulen zusammenzufassen oder die Exporte eines Moduls einem anderen Modul zugänglich zu machen.

index.ts Aggregierendes Modul

// Bestimmte Inhalte aus anderen Modulen re-exportieren
export { name, age } from "./user";

// Default-Export re-exportieren (erfordert Umbenennung)
export { default as User } from "./user";

// Alle Inhalte re-exportieren
export * from "./math";

Anwendungsfälle:Verwenden Sie index.ts als Einstiegsdatei, um die Inhalte untergeordneter Module zentral für einheitliche Importe zu exportieren.

Modulauflösungsstrategien

TypeScript bietet mehrere Modulauflösungsstrategien zum Auffinden importierter Module.

Dies kann in tsconfig.json konfiguriert werden.

tsconfig.json-Konfiguration

{
    "compilerOptions": {
        // Node-Auflösungsstrategie
        // Folgt den Node.js-Modulauflösungsregeln
        "moduleResolution": "node",

        // Klassische Auflösungsstrategie
        // Von frühen Versionen von TypeScript verwendete Strategie
        "moduleResolution": "classic",

        // Basis-URL: legt den Basispfad fest
        // Alle nicht-relativen Pfadimporte werden anhand dieses Pfads aufgelöst
        "baseUrl": "./src",

        // Pfadzuordnung: legt Aliase für Importpfade fest
        "paths": {
            // Importe, die mit @ beginnen, werden dem src-Verzeichnis zugeordnet
            "@/*": ["./*"],
            // Importe, die mit @components beginnen, werden dem components-Verzeichnis zugeordnet
            "@components/*": ["./components/*"]
        }
    }
}

Konfigurationsempfehlung:Für neue Projekte wird die Node-Auflösungsstrategie empfohlen, da sie derzeit der am häufigsten verwendete Ansatz ist.

Dynamischer Import

Dynamischer Import verwendet die import()-Syntax, um Module zur Laufzeit bei Bedarf zu laden.

Dies ist sehr nützlich für Code-Splitting und Lazy Loading.

Beispiel

// Dynamischer Import - Lazy Loading
// import() gibt ein Promise zurück
async function loadMath() {
    // Modul dynamisch importieren; es wird nur geladen, wenn die Ausführung diesen Punkt erreicht
    var math = await import("./math");

    // math.default ist die standardmäßig exportierte Funktion
    console.log("Dynamische Addition: " + math.default(1, 2));
}

// Die verzögert geladene Funktion aufrufen
loadMath();

// Bedingter Import: verschiedene Module abhängig von Bedingungen dynamisch laden
async function loadFeature(enable: boolean) {
    if (enable) {
        // Modul nur laden, wenn die Bedingung erfüllt ist
        var feature = await import("./feature");
        feature.run();
    }
}

// Laden je nach Bedingung
loadFeature(true);

Ausgabe:

动态加法: 3

Leistungsoptimierung:Dynamische Importe ermöglichen Code-Splitting, laden zusätzlichen Code nur bei Bedarf und verkürzen die anfängliche Ladezeit.

Hinweise

  • Relative Pfade:Verwenden Sie relative Pfade, um lokale Module zu importieren (./, ../)
  • Modulendungen:TypeScript behandelt Endungen während der Kompilierung automatisch
  • Standard- vs. benannte Exporte:Ein Standardexport pro Modul, mehrere benannte Exporte
  • esModuleInterop：Das Aktivieren dieser Option erleichtert den Import von CommonJS-Modulen

Bewährte Vorgehensweisen:Halten Sie Importpfade konsistent, verwenden Sie Pfadaliasse, um lange Pfade zu vereinfachen, und etablieren Sie eine klare Modulorganisationsstruktur.

Zusammenfassung

Das Modulsystem ist der Kern der TypeScript-Projektorganisation.

  • export：Variablen, Funktionen, Klassen, Interfaces exportieren
  • import：Exportierten Inhalt importieren
  • Default-Export:Einer pro Modul, flexibel einsetzbar
  • Re-Export:Module zusammenfassen, Einstiegsdateien erstellen
  • Dynamischer Import:Lazy Loading, Performance-Optimierung
  • Modulauflösung:Pfad-Aliase und Auflösungsstrategien konfigurieren

Empfehlung:Modulstruktur sinnvoll organisieren, Pfad-Aliase verwenden, um Importe zu vereinfachen, und klare Export-/Import-Konventionen festlegen.

Andere Erweiterungen