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
Hinweis: Diese Inhalte wurden mit Unterstützung von Künstlicher Intelligenz erstellt und redaktionell überprüft (Transparenzhinweis gemäß Art. 50 EU AI Act).