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.