TypeScript

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`, `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

Kategorien: Keine
Zuletzt aktualisiert am 03.03.2026 19:18