TypeScript-Typen und Module

TypeScript ergänzt JavaScript um Typbeschreibungen. Der Compiler prüft sie, bevor daraus JavaScript entsteht. Ein Typ ist kein automatischer Prüfer für unbekannte Netzwerkdaten. In Hausakte beschreibt TypeScript beispielsweise die Form eines Eintrags. Andere Module können diese Beschreibung importieren.

Beispieldateien

types.ts

01Eine Form beschreiben

type Entry definiert die Eigenschaften id, title und costCents. ? macht costCents optional. Die Funktion erhält nur Werte, die diese Form erfüllen. Zahl und Text sind unterschiedliche Typen.

types.ts · typescriptDatei öffnen

export type Entry = { id: string; title: string; costCents?: number };
export function describe(entry: Entry): string {
  return `${entry.title}: ${(entry.costCents ?? 0) / 100} EUR`;
}
console.log(describe({ id: 'e1', title: 'Roof', costCents: 12990 }));

Starten / prüfen

npx tsc types.ts --strict --target ES2022 --module NodeNext
node types.js

02Kompilieren und starten

Installiere TypeScript im Lernordner mit npm install --save-dev typescript@6.0.3. Führe npx tsc types.ts --strict --target ES2022 --module NodeNext aus und danach node types.js. Der Compiler erzeugt eine zusätzliche JavaScript-Datei.

03Module und Grenzen verstehen

export macht einen Namen für andere Dateien zugänglich. Dort verwendet import type den Typ. Zur Laufzeit bleibt von dieser Typbeschreibung nichts übrig. Externe Daten müssen deshalb zusätzlich geprüft werden. Später verwenden wir dafür einen Parser.

Erwartetes Ergebnis

Roof: 129.9 EUR

Deine Übung

Ersetze costCents: 12990 durch costCents: "12990" und führe nur den Compiler aus.

Lösung mit Erklärung anzeigen

Der Compiler meldet, dass string nicht number zugewiesen werden kann. Wandle bestätigte Formulareingaben ausdrücklich um. Ein as Entry nach JSON.parse wäre dagegen nur eine Behauptung und keine Validierung.

Projektbezug und Quellen

Das Beispiel ist zum Lernen vereinfacht. Die verlinkte Codeversion zeigt die Anwendung im Projekt und die dortigen Prüfungen.

Hausakte