TypeScript Module und Namespaces

In TypeScript gibt es zwei wichtige Möglichkeiten, um den Code zu organisieren: Module und Namespaces. Beide Konzepte helfen dabei, größere Codebasen in kleinere, logischere Einheiten zu unterteilen und Kollisionen von Namen zu vermeiden. In diesem Artikel werden wir das Modul-System von TypeScript, die Verwendung von Imports und Exports sowie die Unterschiede zwischen Modulen und Namespaces beleuchten.

Module-System in TypeScript

Module in TypeScript sind Dateien, die Code kapseln und exportieren, sodass er in anderen Dateien wiederverwendet werden kann. Jedes Modul hat seinen eigenen Gültigkeitsbereich (Scope), was bedeutet, dass Variablen, Funktionen oder Klassen, die in einem Modul definiert sind, standardmäßig nicht außerhalb dieses Moduls zugänglich sind, es sei denn, sie werden explizit exportiert.

TypeScript verwendet das moderne ECMAScript-Modul-System (ESM), das auf den ECMAScript-Standards basiert und in den meisten modernen JavaScript-Umgebungen (wie Node.js und Browsern) unterstützt wird. Module sind ideal für die Strukturierung und Organisation von Code, insbesondere bei größeren Projekten.

Jede TypeScript-Datei kann als Modul betrachtet werden, wenn sie entweder etwas exportiert oder von einer anderen Datei etwas importiert. Beispiel einer Modulstruktur:

// math.ts - Modul, das Funktionen exportiert
export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}

// app.ts - Import des Moduls
import { add, subtract } from './math';

console.log(add(5, 3));      // Ausgabe: 8
console.log(subtract(10, 4)); // Ausgabe: 6

In diesem Beispiel exportiert das Modul `math.ts` zwei Funktionen, die dann im `app.ts`-Modul importiert und verwendet werden.

Import und Export von Modulen

Der Import und Export von Modulen in TypeScript basiert auf den ECMAScript-Standards. Es gibt zwei Hauptmethoden, um Elemente in einem Modul zu exportieren: named exports und default exports. Mehrere benannte Exports können aus einem Modul exportiert werden. Diese müssen beim Import unter demselben Namen importiert werden.

  // Named Exports in math.ts
  export function multiply(x: number, y: number): number {
    return x * y;
  }

  export function divide(x: number, y: number): number {
    return x / y;
  }

  // Import der Funktionen
  import { multiply, divide } from './math';

  console.log(multiply(6, 3));  // Ausgabe: 18
  console.log(divide(12, 4));   // Ausgabe: 3

Es kann nur ein `default export` pro Modul geben. Der Name des Imports kann beliebig gewählt werden.

  // Default Export in greet.ts
  export default function greet(name: string): void {
    console.log(`Hello, ${name}`);
  }

  // Import des Default Exports
  import greet from './greet';

  greet("Philipp"); // Ausgabe: Hello, Philipp

Default Exports eignen sich gut für Module, die nur eine zentrale Funktion oder Klasse bereitstellen.

Es ist auch möglich, das gesamte Modul als Objekt zu importieren und auf die Exporte über dieses Objekt zuzugreifen:

  import * as math from './math';

  console.log(math.add(4, 2));       // Ausgabe: 6
  console.log(math.subtract(10, 5)); // Ausgabe: 5

Unterschiede zwischen Modulen und Namespaces

Während Module und Namespaces in TypeScript ähnliche Ziele verfolgen, gibt es signifikante Unterschiede zwischen ihnen.

Module:

• Basieren auf den ECMAScript-Modulen.
• Jedes Modul ist eine eigene Datei, und der Code in einem Modul ist nur innerhalb der Datei sichtbar, es sei denn, er wird explizit exportiert.
• Module werden verwendet, um Code zwischen verschiedenen Dateien zu trennen und diesen bei Bedarf zu importieren.
• TypScript-Module folgen dem Standard und funktionieren gut in modernen JavaScript-Umgebungen wie Node.js oder Browsern.

Module sind der empfohlene Weg zur Organisation von Code, da sie dem JavaScript-Standard folgen und in modernen Entwicklungsumgebungen weit verbreitet sind.

Namespaces:

• Sind eine TypeScript-spezifische Lösung, die vor den ECMAScript-Modulen verwendet wurde, um den Namensraum von Funktionen, Klassen oder Variablen zu kapseln.
• Namespaces kapseln Code in einem einzigen Gültigkeitsbereich, ohne den Code in mehrere Dateien aufteilen zu müssen.
• Sie werden häufig in älteren Codebasen oder Bibliotheken verwendet, die nicht auf moderne ECMAScript-Module umgestellt wurden.
• Syntaxbeispiel eines Namespaces:

    namespace MathOperations {
      export function add(x: number, y: number): number {
        return x + y;
      }
      export function subtract(x: number, y: number): number {
        return x - y;
      }
    }

    console.log(MathOperations.add(5, 3)); // Ausgabe: 8
    console.log(MathOperations.subtract(10, 4)); // Ausgabe: 6

Unterschiede:

• Module folgen den modernen JavaScript-Standards, während Namespaces TypeScript-spezifisch sind.
• Module sind die bevorzugte Methode, um Code in separaten Dateien zu organisieren und zu teilen. Namespaces sind eher eine Methode, um größere Mengen an Code innerhalb einer Datei zu strukturieren.
• Namespaces können hilfreich sein, um globalen Code zu organisieren, während Module besser geeignet sind, um modulare und wiederverwendbare Codebasen zu schaffen.

Fazit

TypeScript-Module und Namespaces bieten unterschiedliche Möglichkeiten, Code zu strukturieren und zu organisieren. Während Namespaces in älteren Projekten oder für die Organisation von Code innerhalb einer Datei nützlich sind, sind Module die moderne und bevorzugte Methode, um Code in Dateien zu trennen und zu importieren/exportieren. TypeScript-Module basieren auf den ECMAScript-Standards und bieten eine saubere, standardkonforme Lösung, um Code wartbar und wiederverwendbar zu gestalten.