TypeScript

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).

---

Dieser Leitfaden bietet einen strukturierten Weg, um TypeScript von Grund auf zu erlernen und in realen Projekten anzuwenden.

Lernpfad

Der Lernpfad gliedert sich in vier wesentliche Phasen.

Phase 1: Grundlagen (Prerequisites & Basics)

• JavaScript-Grundlagen auffrischen: Variablen, Funktionen, ES6+ Features (Arrow Functions, Destructuring, Promises).
• Was ist TypeScript?: Unterschiede zu JavaScript, Vorteile (Typensicherheit, IDE-Support), Installation (Node.js & npm).
• Einfache Typen: String, Number, Boolean, Arrays, Tuples, Enums, Any, Unknown, Void, Null und Undefined.

Phase 2: Fortgeschrittene Typisierung

• Interfaces und Typ-Aliase: Definition von Objekt-Strukturen, Unterschiede zwischen `interface` und `type`.
• Funktionen: Typisierung von Parametern und Rückgabewerten, Optionale Parameter, Overloading.
• Klassen und OOP: Access Modifiers (`public`, `private`, `protected`), Readonly, Getter/Setter, abstrakte Klassen, Implementierung von Interfaces.
• Union und Intersection Types: Kombination von Typen (`|` und `&`).

Phase 3: Experten-Konzepte (Advanced Types)

• Generics: Wiederverwendbare, typensichere Komponenten, Generic Constraints.
• Utility Types: Partial, Required, Readonly, Pick, Omit, Record.
• Type Guards und Narrowing: `typeof`, `instanceof`, Custom Type Guards.
• Mapped und Conditional Types: Fortgeschrittene Typ-Transformationen.

Phase 4: Ökosystem & Best Practices

• TypeScript Konfiguration: Die `tsconfig.json` verstehen (strict mode, target, module).
• Module und Namespaces: Import/Export, Code-Organisation.
• TypeScript mit Frameworks: React, Vue, Angular oder Node.js/Express.
• Testing: Jest mit TypeScript (ts-jest).

Lernplan (8 Wochen)

Ein strukturierter 8-Wochen-Plan bei einem Zeitaufwand von ca. 5-10 Stunden pro Woche.

Woche 1: Setup und Grundlagen

• Tag 1-2: Node.js installieren, TypeScript global installieren (`npm i -g typescript`). Erstes Skript schreiben, kompilieren (`tsc`) und ausführen (`node`).
• Tag 3-5: Primitive Typen, Arrays und Tuples lernen. Variablen explizit typisieren.
• Tag 6-7: Die `tsconfig.json` initialisieren und die wichtigsten Compiler-Optionen verstehen.

Woche 2: Komplexe Typen und Interfaces

• Tag 1-3: Object Types, Typ-Aliase (`type`) und Interfaces definieren.
• Tag 4-6: Unterschiede zwischen `type` und `interface` herausarbeiten. Union und Intersection Types anwenden.
• Tag 7: Übung: Eine kleine Datenstruktur (z. B. für eine To-Do-Liste) mit typisierten Objekten entwerfen.

Woche 3: Funktionen und Klassen

• Tag 1-3: Funktionen typisieren (Parameter, Return Types, rest parameters). Function Overloading verstehen.
• Tag 4-6: Klassen in TypeScript. Sichtbarkeits-Modifikatoren (`private`, `protected`) einsetzen.
• Tag 7: Übung: Die To-Do-Liste in objektorientierter Struktur mit Klassen und Interfaces implementieren.

Woche 4: Generics

• Tag 1-3: Konzept von Generics verstehen. Generische Funktionen und Klassen erstellen.
• Tag 4-6: Generic Constraints (`extends`) anwenden, um Typ-Einschränkungen zu definieren.
• Tag 7: Übung: Eine generische Speicher-Klasse (Storage) schreiben, die verschiedene Datentypen aufnehmen kann.

Woche 5: Fortgeschrittene Typen und Type Guards

• Tag 1-3: Type Narrowing (z. B. if-Statements mit `typeof`) und benutzerdefinierte Type Guards schreiben.
• Tag 4-6: `any` vs `unknown`, `never`-Typ verstehen. Exhaustive Switches anwenden.
• Tag 7: Refactoring einer bestehenden puren JavaScript-Logik zu striktem TypeScript.

Woche 6: Utility Types und Konfiguration

• Tag 1-3: Eingebaute Utility-Typen anwenden: `Partial<T>`, `Pick<T, K>`, `Omit<T, K>`, `Record<K, T>`.
• Tag 4-6: Tieftauchen in `tsconfig.json` (`strict: true`, `noImplicitAny`). Modul-Auflösung verstehen.
• Tag 7: Übung: Verwende Utility Types, um aus bestehenden Interfaces neue abgeleitete Datenmodelle zu erstellen.

Woche 7: TypeScript im Frontend/Backend

• Frontend-Track: React/Vue-Projekt mit TypeScript aufsetzen (z.B. Vite, Create React App). Typisierte Props und State ausprobieren.
• Backend-Track: Express.js-Server mit TypeScript einrichten. Request- und Response-Objekte typisieren.
• Ziel: Eine kleine, funktionierende Anwendung oder API erstellen.

Woche 8: Tooling, Testing & Abschluss

• Tag 1-3: Linting mit ESLint und Prettier für TypeScript einrichten.
• Tag 4-6: Unit-Tests mit Jest (`ts-jest`) schreiben und Typ-Assertionen in Tests üben.
• Tag 7: Projekt abschließen, Code reviewen und mögliche Fallstricke bei der Migration von JS zu TS dokumentieren.

Weitere Ressourcen

• Offizielle Dokumentation
• Type Challenges (GitHub)
• TypeScript Playground

---

Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).