Module in TypeScript

Module in TypeScript

Dieser Artikel erklärt Module in TypeScript.

YouTube Video

Module in TypeScript

Module in TypeScript sind eine wichtige Funktion zur Verbesserung der Wiederverwendbarkeit und Wartbarkeit von Code. Wie JavaScript basiert auch TypeScript auf dem Modulsystem von ECMAScript 2015 (ES6), ermöglicht aber zusätzlich die Nutzung des Typensystems von TypeScript.

Was sind Module?

Ein Modul ist ein System, das verwandten Code in einer einzigen Einheit gruppiert, die in anderen Dateien importiert und wiederverwendet werden kann. In TypeScript wird pro Datei ein Gültigkeitsbereich erstellt, um den Code zu kapseln und zu verhindern, dass er andere Dateien beeinflusst. Dies hilft, Codekonflikte zu vermeiden und die Wartung zu erleichtern.

Interne und externe Module

  • Interne Module (Namespaces): Eine Moduldefinition, die in TypeScript 1.5 und früher verwendet wurde und jetzt nicht mehr empfohlen wird. Es wird jetzt als 'Namespace' behandelt.
  • Externe Module: Der aktuelle Standard, basierend auf dem ES6-Modulsystem. Dieser Abschnitt erklärt hauptsächlich externe Module.

So exportieren Sie Module

Beim Erstellen von Modulen ist ein Export erforderlich, um den Zugriff von außen zu ermöglichen. In TypeScript können Werte, Funktionen, Klassen usw. mit dem Schlüsselwort export exportiert werden. Es gibt hauptsächlich zwei Arten von Exports.

Benannte Exports

Wird verwendet, um mehrere Exports zu erstellen, sodass die Importseite spezifische auswählen und verwenden kann.

 1// mathUtils.ts
 2export const pi: number = 3.14159;
 3
 4export function add(x: number, y: number): number {
 5    return x + y;
 6}
 7
 8export function subtract(x: number, y: number): number {
 9    return x - y;
10}

Standard-Exports

Wird verwendet, wenn das gesamte Modul einen einzelnen Standard-Export haben soll. Standard-Exports werden ohne Namen exportiert, sodass sie von der Importseite mit beliebigem Namen empfangen werden können.

 1// calculator.ts
 2export default class Calculator {
 3    add(x: number, y: number): number {
 4        return x + y;
 5    }
 6
 7    subtract(x: number, y: number): number {
 8        return x - y;
 9    }
10}

So importieren Sie Module

Um Module zu verwenden, importieren Sie Werte, Funktionen, Klassen usw. aus dem Modul mit dem Schlüsselwort import.

Benannte Importe

Beim Importieren spezifischer Elemente aus einem benannten Export verwenden Sie geschweifte Klammern {}.

1// main.ts
2import { pi, add, subtract } from './mathUtils';
3
4console.log(`Value of pi: ${pi}`);
5console.log(`Addition: ${add(10, 5)}`);
6console.log(`Subtraction: ${subtract(10, 5)}`);

Standardimporte

Beim Importieren eines Standardexports können Sie ihn mit einem beliebigen Namen empfangen.

1// main.ts
2import Calculator from './calculator';
3
4const calculator = new Calculator();
5console.log(`Addition: ${calculator.add(10, 5)}`);
6console.log(`Subtraction: ${calculator.subtract(10, 5)}`);

Import-Aliase

Um Namenskollisionen zu vermeiden oder lange Namen zu verkürzen, können Sie mit einem Alias importieren.

1// main.ts
2import { add as addition, subtract as subtraction } from './mathUtils';
3
4console.log(`Addition: ${addition(10, 5)}`);
5console.log(`Subtraction: ${subtraction(10, 5)}`);

Unterschiede zwischen Modulen und Namespaces

Ein Namespace (namespace) ist eine interne Modulstruktur, die in frühen TypeScript-Versionen verwendet wurde, um Code zusammenzufassen. Es wird jedoch empfohlen, ES6-Module zu verwenden, und Namespaces sind kaum noch erforderlich.

Namespaces können innerhalb derselben Datei oder über mehrere Dateien hinweg definiert werden, und da sie global erweitert werden können, kann das Verwalten von Abhängigkeiten schwierig werden. Im Gegensatz dazu haben Module separate Scopes pro Datei und klare Abhängigkeiten, was sie zu einer moderneren und sichereren Methode macht.

 1// Example of a namespace
 2namespace Geometry {
 3    export function calculateArea(radius: number): number {
 4        return Math.PI * radius * radius;
 5    }
 6}
 7
 8// Can be used directly without importing the module (not recommended)
 9const area: number = Geometry.calculateArea(5);
10console.log(`Area: ${area}`);

TypeScript-Modulauflösung

In TypeScript gibt es zwei Strategien zur Modulauflösung.

  • Node-Modulauflösung: Die Standardauflösungsmethode, die in Node.js-Umgebungen verwendet wird und Module durch das Durchsuchen des node_modules-Ordners auflöst.
  • Klassische Modulauflösung: TypeScripts eigene Auflösungsmethode, die ein flexibleres Suchen ermöglicht, aber heutzutage nicht mehr häufig verwendet wird.

In der Regel wird die Node-Modulauflösung verwendet und ist standardmäßig aktiviert, es sei denn, in der Konfigurationsdatei wird etwas anderes angegeben.

Praktisches Beispiel

Abschließend wird ein Beispiel gezeigt, wie Berechnungsfunktionen durch Module implementiert und wiederverwendet werden können.

mathUtils.ts

 1export const pi: number = 3.14159;
 2
 3export function multiply(x: number, y: number): number {
 4    return x * y;
 5}
 6
 7export function divide(x: number, y: number): number {
 8    if (y === 0) {
 9        throw new Error("Cannot divide by zero");
10    }
11    return x / y;
12}

calculator.ts

 1import { multiply, divide } from './mathUtils';
 2
 3export default class Calculator {
 4    multiplyNumbers(x: number, y: number): number {
 5        return multiply(x, y);
 6    }
 7
 8    divideNumbers(x: number, y: number): number {
 9        return divide(x, y);
10    }
11}

main.ts

1import Calculator from './calculator';
2
3const calculator = new Calculator();
4
5const result1: number = calculator.multiplyNumbers(10, 5);
6console.log(`Multiplication: ${result1}`);
7
8const result2: number = calculator.divideNumbers(10, 2);
9console.log(`Division: ${result2}`);

Zusammenfassung

Das TypeScript-Modulsystem ist ein leistungsstarkes Werkzeug zur Organisation von Code, zur Verbesserung der Wiederverwendbarkeit und zur Erhöhung der Wartbarkeit. Es wird empfohlen, externe Module auf Basis von ES6-Modulen zu verwenden. Mit den Schlüsselwörtern export und import können Module einfach exportiert und importiert werden.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video