TypeScript: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
imported>Import Version 220 |
Keine Bearbeitungszusammenfassung |
||
| Zeile 8: | Zeile 8: | ||
Der Lernpfad gliedert sich in vier wesentliche Phasen. | Der Lernpfad gliedert sich in vier wesentliche Phasen. | ||
=== Phase 1: Grundlagen (Prerequisites & | === Phase 1: Grundlagen (Prerequisites & Basics) === | ||
* '''JavaScript-Grundlagen auffrischen:''' Variablen, Funktionen, ES6+ Features (Arrow Functions, Destructuring, Promises). | * '''JavaScript-Grundlagen auffrischen:''' Variablen, Funktionen, ES6+ Features (Arrow Functions, Destructuring, Promises). | ||
* '''Was ist TypeScript?:''' Unterschiede zu JavaScript, Vorteile (Typensicherheit, IDE-Support), Installation (Node.js & | * '''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. | * '''Einfache Typen:''' String, Number, Boolean, Arrays, Tuples, Enums, Any, Unknown, Void, Null und Undefined. | ||
=== Phase 2: Fortgeschrittene Typisierung === | === Phase 2: Fortgeschrittene Typisierung === | ||
* '''Interfaces und Typ-Aliase:''' Definition von Objekt-Strukturen, Unterschiede zwischen `interface` und `type`. | * '''Interfaces und Typ-Aliase:''' Definition von Objekt-Strukturen, Unterschiede zwischen `interface` und `type`. | ||
* '''Funktionen:''' Typisierung von Parametern und Rückgabewerten, Optionale Parameter, Overloading. | * '''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. | * '''Klassen und OOP:''' Access Modifiers (`public`, `private`, `protected`), Readonly, Getter/Setter, abstrakte Klassen, Implementierung von Interfaces. | ||
* '''Union und Intersection Types:''' Kombination von Typen (`|` und `& | * '''Union und Intersection Types:''' Kombination von Typen (`|` und `&`). | ||
=== Phase 3: Experten-Konzepte (Advanced Types) === | === Phase 3: Experten-Konzepte (Advanced Types) === | ||
* '''Generics:''' Wiederverwendbare, typensichere Komponenten, Generic Constraints. | * '''Generics:''' Wiederverwendbare, typensichere Komponenten, Generic Constraints. | ||
* '''Utility Types:''' Partial, Required, Readonly, Pick, Omit, Record. | * '''Utility Types:''' Partial, Required, Readonly, Pick, Omit, Record. | ||
| Zeile 28: | Zeile 25: | ||
* '''Mapped und Conditional Types:''' Fortgeschrittene Typ-Transformationen. | * '''Mapped und Conditional Types:''' Fortgeschrittene Typ-Transformationen. | ||
=== Phase 4: Ökosystem & | === Phase 4: Ökosystem & Best Practices === | ||
* '''TypeScript Konfiguration:''' Die `tsconfig.json` verstehen (strict mode, target, module). | * '''TypeScript Konfiguration:''' Die `tsconfig.json` verstehen (strict mode, target, module). | ||
* '''Module und Namespaces:''' Import/Export, Code-Organisation. | * '''Module und Namespaces:''' Import/Export, Code-Organisation. | ||
* '''TypeScript mit Frameworks:''' React, Vue, Angular oder Node.js/Express. | * '''TypeScript mit Frameworks:''' React, Vue, Angular oder Node.js/Express. | ||
* '''Testing:''' Jest mit TypeScript (ts-jest). | * '''Testing:''' Jest mit TypeScript (ts-jest). | ||
== Lernplan (8 Wochen) == | == Lernplan (8 Wochen) == | ||
| Zeile 40: | Zeile 37: | ||
=== Woche 1: Setup und Grundlagen === | === 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 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 3-5:''' Primitive Typen, Arrays und Tuples lernen. Variablen explizit typisieren. | ||
* '''Tag 6-7:''' Die `tsconfig.json` initialisieren und die wichtigsten Compiler-Optionen verstehen. | * '''Tag 6-7:''' Die `tsconfig.json` initialisieren und die wichtigsten Compiler-Optionen verstehen. | ||
=== Woche 2: Komplexe Typen und Interfaces === | === Woche 2: Komplexe Typen und Interfaces === | ||
* '''Tag 1-3:''' Object Types, Typ-Aliase (`type`) und Interfaces definieren. | * '''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 4-6:''' Unterschiede zwischen `type` und `interface` herausarbeiten. Union und Intersection Types anwenden. | ||
| Zeile 52: | Zeile 47: | ||
=== Woche 3: Funktionen und Klassen === | === Woche 3: Funktionen und Klassen === | ||
* '''Tag 1-3:''' Funktionen typisieren (Parameter, Return Types, rest parameters). Function Overloading verstehen. | * '''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 4-6:''' Klassen in TypeScript. Sichtbarkeits-Modifikatoren (`private`, `protected`) einsetzen. | ||
| Zeile 58: | Zeile 52: | ||
=== Woche 4: Generics === | === Woche 4: Generics === | ||
* '''Tag 1-3:''' Konzept von Generics verstehen. Generische Funktionen und Klassen erstellen. | * '''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 4-6:''' Generic Constraints (`extends`) anwenden, um Typ-Einschränkungen zu definieren. | ||
| Zeile 64: | Zeile 57: | ||
=== Woche 5: Fortgeschrittene Typen und Type Guards === | === Woche 5: Fortgeschrittene Typen und Type Guards === | ||
* '''Tag 1-3:''' Type Narrowing (z. B. if-Statements mit `typeof`) und benutzerdefinierte Type Guards schreiben. | * '''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 4-6:''' `any` vs `unknown`, `never`-Typ verstehen. Exhaustive Switches anwenden. | ||
| Zeile 70: | Zeile 62: | ||
=== Woche 6: Utility Types und Konfiguration === | === 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 1-3:''' Eingebaute Utility-Typen anwenden: `Partial<T>`, `Pick | |||
* '''Tag 4-6:''' Tieftauchen in `tsconfig.json` (`strict: true`, `noImplicitAny`). Modul-Auflösung verstehen. | * '''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. | * '''Tag 7:''' Übung: Verwende Utility Types, um aus bestehenden Interfaces neue abgeleitete Datenmodelle zu erstellen. | ||
=== Woche 7: TypeScript im Frontend/Backend === | === 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. | * '''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. | * '''Backend-Track:''' Express.js-Server mit TypeScript einrichten. Request- und Response-Objekte typisieren. | ||
* '''Ziel:''' Eine kleine, funktionierende Anwendung oder API erstellen. | * '''Ziel:''' Eine kleine, funktionierende Anwendung oder API erstellen. | ||
=== Woche 8: Tooling, Testing & | === Woche 8: Tooling, Testing & Abschluss === | ||
* '''Tag 1-3:''' Linting mit ESLint und Prettier für TypeScript einrichten. | * '''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 4-6:''' Unit-Tests mit Jest (`ts-jest`) schreiben und Typ-Assertionen in Tests üben. | ||
| Zeile 88: | Zeile 77: | ||
== Weitere Ressourcen == | == Weitere Ressourcen == | ||
* [https://www.typescriptlang.org/docs/ Offizielle Dokumentation] | * [https://www.typescriptlang.org/docs/ Offizielle Dokumentation] | ||
* [https://github.com/type-challenges/type-challenges Type Challenges (GitHub)] | * [https://github.com/type-challenges/type-challenges Type Challenges (GitHub)] | ||
Aktuelle Version vom 3. März 2026, 19:18 Uhr
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).