So erstellen und verwenden Sie TypeScript-Module

TypeScript-Module bieten einen strukturierten Ansatz zum Organisieren und Verwalten von Code. Module ermöglichen die Kapselung von Code in separate Dateien, was die Wartbarkeit, Wiederverwendbarkeit und Testbarkeit verbessert. In diesem Handbuch wird der Prozess zum Erstellen und Verwenden von TypeScript-Modulen erläutert.

Was sind TypeScript-Module?

TypeScript-Module sind einzelne Dateien, die Codeelemente wie Klassen, Funktionen und Variablen exportieren und importieren. Durch den Einsatz von Modulen kann Code in überschaubare Teile aufgeteilt werden, was eine bessere Kontrolle über die Interaktionen zwischen verschiedenen Teilen des Codes ermöglicht.

Erstellen eines TypeScript-Moduls

Um ein TypeScript-Modul zu erstellen, sollten die folgenden Schritte befolgt werden:

1. Erstellen Sie eine TypeScript-Datei: Beginnen Sie mit der Erstellung einer neuen `.ts`-Datei für das Modul, z. B. `mathUtils.ts`.
2. Definieren und exportieren Sie Code: Implementieren Sie Funktionen, Klassen oder Variablen in dieser Datei und verwenden Sie das Schlüsselwort export, um sie für andere Module verfügbar zu machen.

Beispiel für ein einfaches Modul:

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

In diesem Beispiel werden die Funktionen „add“ und „subtract“ definiert und aus dem Modul „mathUtils.ts“ exportiert.

Importieren und Verwenden eines TypeScript-Moduls

Um den Code eines TypeScript-Moduls in einer anderen Datei verwenden zu können, muss dieser importiert werden. Dazu sind folgende Schritte notwendig:

1. Erstellen Sie eine neue TypeScript-Datei: Generieren Sie eine Datei, in der der Code des Moduls verwendet wird, z. B. „app.ts“.
2. Importieren Sie das Modul: . Verwenden Sie das Schlüsselwort import, um Funktionen, Klassen oder Variablen aus dem Modul zu importieren.

Beispiel für den Import und die Verwendung der Funktionen „Addieren“ und „Subtrahieren“:

// app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

In diesem Beispiel werden die Funktionen „add“ und „subtract“ aus dem Modul „mathUtils“ importiert und in der Datei „app.ts“ verwendet.

Standardexporte und benannte Exporte

TypeScript-Module unterstützen sowohl Standard- als auch benannte Exporte. Hier ist eine kurze Übersicht:

• Standardexporte: Ein einzelner Wert kann mit export default als Standardexport aus einem Modul exportiert werden.
• Benannte Exporte: Mehrere Werte können mithilfe benannter Exporte mit dem Schlüsselwort export aus einem Modul exportiert werden.

Beispiel, das beide Exportarten demonstriert:

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

In diesem Beispiel wird „Circle“ als Standardexport exportiert, während „getCircleInfo“ ein benannter Export ist.

Organisieren von Modulen in einem Projekt

Bei größeren Projekten mit zahlreichen Modulen ist die Organisation von entscheidender Bedeutung. Beachten Sie die folgenden Tipps:

• Verzeichnisstruktur: Gruppieren Sie verwandte Module in Verzeichnissen wie „models/“, „services/“ und „utils/“.
• Indexdateien: Verwenden Sie „index.ts“-Dateien in Verzeichnissen, um Module zu aggregieren und erneut zu exportieren und so den Import im gesamten Projekt zu vereinfachen.

Beispiel einer Verzeichnisstruktur:

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

Abschluss

TypeScript-Module sind eine Schlüsselfunktion für die Organisation und Verwaltung von Code. Durch die Erstellung und Verwendung von Modulen kann Code modular, wartbar und skalierbar gehalten werden. Wenn Sie wissen, wie Sie Code exportieren und importieren und wie Sie ein Projekt strukturieren, können Sie die Effektivität der TypeScript-Entwicklung steigern.