TypeScript für Einsteiger: Schulung zum Umstieg von JavaScript

Von JavaScript zu TypeScript

• Warum TypeScript: Fehler im Editor statt in Produktion, Typen als lebende Dokumentation
• Erste Typen ohne Installation im TypeScript Playground ausprobieren
• TypeScript im Projekt installieren: npm install -D typescript und npx tsc --init
• Was der Compiler aus einer .ts-Datei macht: Typen verschwinden, JavaScript bleibt
• Versionen einordnen: TypeScript 6 als Übergang, TypeScript 7 mit nativem Compiler in Go
• .ts-Dateien direkt mit Node.js starten – warum das den Typcheck nicht ersetzt

Grundtypen und Funktionen

• Primitive Typen: string, number, boolean, null und undefined
• Eingebaute Typen im Alltag: Arrays, Tupel, Date, Map und Set
• Typ-Inferenz: wo TypeScript selbst mitdenkt und Annotationen überflüssig sind
• any und unknown: bewusst offen lassen statt stillschweigend abschalten
• Funktionen typisieren: Parameter, Rückgabewert, optionale und Standardparameter
• Callbacks und Funktionstypen, etwa für map, filter und Event-Handler

Eigene Typen: Interfaces und Typ-Aliase

• Objektformen mit interface beschreiben, Eigenschaften optional oder readonly
• Typ-Aliase mit type – und eine einfache Regel, wann welche Form passt
• Aufzählungen: enum lesen können, im neuen Code String-Literal-Unions bevorzugen
• Konstanten-Objekte mit as const als Alternative zu enum
• Interfaces mit extends erweitern, Typen mit & kombinieren

Union-Typen und Typen aus Werten ableiten

• Union-Typen für Werte, die mehrere Formen annehmen können
• Typen eingrenzen (Narrowing) mit typeof, in und Gleichheitsprüfungen
• Zustände wie „lädt“, „Fehler“ und „fertig“ als Union mit gemeinsamem status-Feld
• Der keyof-Operator: erlaubte Schlüssel eines Objekts als eigener Typ
• typeof im Typkontext: den Typ einer vorhandenen Konstante wiederverwenden
• Indizierte Zugriffstypen wie Kunde["adresse"] für Teilstrukturen
• Record<K, V> für Nachschlagetabellen mit begrenzten Schlüsseln

Generics Schritt für Schritt

• Generics an Bekanntem verstehen: Array<T>, Promise<T> und Map<K, V>
• Die erste eigene generische Funktion, z. B. erstesElement<T>(liste: T[])
• Typparameter mit extends einschränken, etwa auf Objekte mit id
• Vorhandene Typen abwandeln mit Partial, Pick, Omit und Readonly
• Metadaten aus Funktionen gewinnen: ReturnType, Parameters und Awaited

Ein bestehendes JavaScript-Projekt umstellen

• Bestandsaufnahme: Build, Tests, Abhängigkeiten und Reihenfolge der Module
• tsconfig.json mit allowJs: .js- und .ts-Dateien im selben Projekt
• // @ts-check und checkJs als Vorstufe – Vertiefung im Seminar JSDoc und TypeScript
• Typen für Drittbibliotheken: mitgelieferte Typen und @types-Pakete
• Datei für Datei umbenennen, beginnend bei Modulen ohne eigene Abhängigkeiten
• Offene Typfehler mit @ts-expect-error und Begründung vertagen statt any zu streuen
• tsc --noEmit als npm-Skript und Pflichtschritt in der CI-Pipeline

Strikte Compiler-Optionen nach und nach

• Seit TypeScript 6 ist strict Standard: im Bestand mit "strict": false starten, noImplicitAny als erste Stufe
• strictNullChecks: mit null und undefined umgehen, ?. und ?? gezielt einsetzen
• Weitere Optionen der strict-Familie einzeln aktivieren und Fehlerzahlen verfolgen
• Neue Module von Anfang an strikt: abweichende Einstellungen je Ordner per eigener tsconfig

Module und Deklarationen

• ES-Module statt globaler Skripte: was eine Datei zum Modul macht
• Code teilen mit import und export, Typen mit import type
• Globale Typen mit declare und .d.ts-Dateien, z. B. für Umgebungsvariablen
• Deklarationen zusammenführen: vorhandene Interfaces wie Window ergänzen
• Modularen Code ausführen: mit tsc übersetzen, mit Vite im Browser, direkt in Node.js

Decorators im Überblick

• Was Decorators sind und wo sie Ihnen begegnen: Angular, NestJS, ORMs
• Standard-Decorators seit TypeScript 5.0 und experimentalDecorators in Bestandscode
• Einen Methoden-Decorator schreiben, der Aufrufe protokolliert
• Decorator-Fabriken: Decorators mit Parametern konfigurieren
• Klassen- und Feld-Decorators im Überblick – Vertiefung im TypeScript Intensivkurs

TypeScript-Umstieg mit Copilot in VS Code

• Compilermeldungen am eigenen Code erklären lassen – die Korrektur entscheiden Sie selbst
• Ein Auftrag, eine Datei: Agent benennt um, ergänzt Typen, tsc --noEmit muss danach grün sein
• Interfaces aus echten API-Antworten oder Testdaten vorschlagen lassen und gegenprüfen
• Anzahl von any und @ts-expect-error als Kennzahl, die der Agent nicht erhöhen darf
• Nächste strikte Option einschalten und die Fehlerliste modulweise abarbeiten lassen

Praxisprojekt: Haushaltsbuch von JavaScript auf TypeScript

• Ausgangspunkt: kleine Haushaltsbuch-Anwendung in JavaScript mit vorhandenen Tests
• Buchungen, Kategorien und Konten mit Interfaces und Union-Typen modellieren
• Module mit allowJs schrittweise umstellen, bis das ganze Projekt unter strict läuft
• Generische Hilfsfunktion zum Gruppieren und Summieren von Buchungen mit Tests