TypeScript erweitert JavaScript um ein statisches Typsystem, das Fehler frühzeitig zur Compile-Zeit (d.h. vor build oder runtime) erkennt. Es verbessert Wartbarkeit und Skalierbarkeit von Code durch klare Typdefinitionen und bessere Tool-Unterstützung. Es kompiliert zu sauberem JavaScript (d.h. im build-Code nicht mehr vorhanden) und ist vollständig kompatibel mit bestehenden JavaScript-Projekten.
Vorteile:
- Frühzeitige Fehlererkennung: Bugs werden im Editor/Build erkannt, bevor sie in Produktion laufen.
- Bessere Lesbarkeit & Dokumentation: Typen dienen als „lebendige Dokumentation“.
- Autovervollständigung & Refactoring: IntelliSense unterstützt Typen, Methoden und sichere Umbenennungen.
- Robuster Code: Funktionen und Objekte müssen dem definierten Typvertrag entsprechen.
- Schrittweise Einführung möglich:
.js→.ts, Typen können nach und nach ergänzt werden.
Tipps für den täglichen Gebrauch:
- Verwende Generics und Utility Types für wiederverwendbare, flexible Funktionen und Datenmodelle.
- Bevorzuge Interfaces für reine Verträge, abstract classes für gemeinsame Logik.
- Nutze Type Narrowing und unknown für sichere Laufzeit-Checks.
- Readonly, private/protected, Optional/Default Parameters erhöhen Code-Sicherheit.
- Enums und Type Assertions verhindern Tippfehler und erhöhen Autocomplete-Sicherheit.
1. Variablen
| Konzept | Syntax / Beispiel | Beschreibung |
|---|---|---|
| Explizite Typannotation | let name: string = 'Ada';let age: number = 28;let isActive: boolean = true; | Typ wird bei Zuweisung festgelegt, später nicht änderbar |
| Type Inference | let city = 'London'; // stringlet score = 42; // number | Typen werden automatisch erkannt, später ebenfalls nicht änderbar |
any vermeiden | let data; data = 'hello'; data = 42; | Variablen ohne Typzuweisung erhalten any |
2. Funktionen
| Konzept | Syntax / Beispiel | Beschreibung |
|---|---|---|
| Parametertypen | function addNumbers(a: number, b: number) | Parameter müssen den angegebenen Typen erfüllen |
| Rückgabetypen | function greet(): string { return 'Hello'} | Explizit setzen hilft bei Dokumentation und Bug-Erkennung |
void | function logDate(): void { console.log("Today")} | Signalisiert, dass die Funktion nichts zurückgibt |
| Typisierung von Parametern und Rückgabewert | function addNumbers(a:number, b: number):number { | Falsche Typen werden bereits zur Entwicklungszeit erkannt |
| Vollständige Rückgaben | function isOldEnough(age: number): string { if(age>=18) {return 'ok'} else { return 'too young'} | Alle Code-Pfade müssen dem Rückgabetyp entsprechen |
3. Arrays und Tuples
| Konzept | Syntax / Beispiel | Hinweise |
|---|---|---|
| Arrays – einfache Typen | const scores: number[] = [95, 87, 100];const names: string[] = ['Ada', 'Grace']; | Alle Elemente müssen dem angegebenen Typ entsprechen |
| Arrays – generisch | const flags: Array<boolean> = [true, false]; | Alternative Schreibweise für Arrays |
| Typensicherheit | ❌ cities.push(42); // Error | Typabweichungen werden früh erkannt |
| Tuples – feste Länge & Typen | const user: [string, number] = ['Ada', 36]; | Reihenfolge und Typ der Elemente sind strikt |
| Zugriff auf Elemente | const coordinates: [number, number] = [51.5, -0.12];console.log(coordinates[0]) | Zugriff auf nicht existierende Indizes ist ein Fehler |
| Anwendungsfall | Koordinaten, Paare, Key-Value-Entries | Positionsbasierte Typprüfung |
4. Objekte & Typen
| Konzept | Syntax / Beispiel | Hinweise |
|---|---|---|
| Objekt-Typannotation | const user: { name: string; age: number } = { name: 'Ada', age: 36 }; | Alle Properties müssen vorhanden sein |
| Optionale Properties | const product: { name: string; description?: string } = { name: 'Laptop' }; | ? markiert optional |
| Readonly | const settings: { readonly theme: string } = { theme: 'dark' }; | Verhindert Änderungen nach Zuweisung |
| Arrays von Objekten | const users: { name: string; age: number }[] = [{ name:'Ada', age:36 }]; | Typprüfung für jedes Array-Element |
| Zugriff sicher | Optional Chaining: product.description?.toUpperCase()Nullish Coalescing: product.description ?? 'No description' | Vermeidet Laufzeitfehler bei optionalen Properties |
5. Type Aliases, Interfaces & Funktionstypen
| Konzept | Syntax / Beispiel | Hinweise |
|---|---|---|
| Type Alias | type Product = { id: number; name: string; price: number }; | Wiederverwendbar für Objekte, Arrays, Tuples, Funktionen |
| Arrays von Typen | type ProductList = Product[]; | Einheitliche Typisierung für Collections |
| Mapped Types | type ScoreMap = { [username: string]: number }; | Dynamische Schlüssel mit konsistentem Werttyp |
| Literal Union | `type Direction = ‚left‘ | ‚right‘ |
| Funktionstypen | type Greeter = (name: string) => string;const greet: Greeter = name => \Hello, ${name}`;` | Signatur von Funktionen wiederverwenden |
| Intersection Types | type Admin = User & { role: 'admin' }; | Kombination von Typen, vorsichtig bei Konflikten |
| Tuples mit Type Alias | type Point = [number, number];const origin: Point = [0,0]; | Feste Länge + Typ pro Position |
| Empfehlung | type standardmäßig nutzen; interface nur für klassische Vererbung oder extends | Vermeidet unbeabsichtigtes Merging, klare Struktur |
6. Functions – Return Types, Optional & Default Parameters
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Explicit Return Type | function getFullName(firstName: string, lastName: string): string { return ... } | Klarheit & Bugprävention |
| Optional Parameter | function logMessage(msg: string, userId?: number) | Mit ? markiert, kann ausgelassen werden |
| Default Parameter | function greetUser(name: string = 'guest') | Automatisch optional, fallback wenn nicht übergeben |
| Combining Optional & Default | function increment(x: number, step: number = 1) | ? nicht nötig, Parameter ist optional |
| Best Practice | Explizite Typen für Klarheit, besonders bei komplexen oder geteilten Funktionen |
7. Type Narrowing
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
typeof Guard | if (typeof value === 'string') | Erkennt Typen wie string, number, etc. |
| Truthiness | if (str) { ... } | Prüft auf undefined/null, sicherer Zugriff |
| Equality Narrowing | if (x === y) { ... } | Typen werden basierend auf Vergleich eingeschränkt |
in Operator | if ('bark' in pet) { pet.bark() } | Prüft Existenz eines Properties in Union-Typen |
| Discriminated Unions | if (pet.kind === 'dog') { pet.bark() } | Literal-Property hilft TypeScript bei Typ-Entscheidung |
instanceof | if (val instanceof Date) | Prüft Klasseninstanzen |
| Custom Type Predicates | function isCar(v: Vehicle): v is Car | Eigene Guards für komplexe Typen |
| Best Practice | Type Guards nutzen, um Autocomplete & Sicherheit zu verbessern |
8. Enums
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Numeric Enum | enum Direction { Up, Down, Left, Right } | Default: 0,1,2,… |
| String Enum | enum Status { Success = "SUCCESS", Failure = "FAILURE" } | Besser lesbar, vermeidet Tippfehler |
| Usage | let move: Direction = Direction.Up | Sicherer als Strings/Numbers direkt |
| Real-World | Game choices, RBAC | Enum + Switch für exhaustive Checks |
| Best Practice | Enums für bekannte Sets von Werten, Strings bevorzugt für Debugging |
9. Type Assertions / Casting
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Angle Brackets | let greet1 = <string>someValue | Nicht in .tsx Dateien verwenden |
as Syntax | let greet2 = someValue as string | Sicher in .tsx Dateien |
| DOM Access | const input = document.querySelector('input') as HTMLInputElement | Assertet Typ für Autocomplete & TS-Sicherheit |
| JSON Parsing | const posts = (await fetch(...).json()) as Post[] | TS kennt Struktur nicht automatisch |
| Best Practice | Assertions nur, wenn Struktur sicher bekannt; verändern Typ nicht runtime |
10. Null, Undefined & Unknown
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Allow undefined/null | `let username: string | undefined; let age: number |
| Check before use | if (name) { ... } | Type Narrowing |
| Optional chaining | user.address?.street | Sicherer Zugriff auf verschachtelte Werte |
| Nullish coalescing | user.address?.street ?? 'default' | Fallback für undefined/null |
unknown Type | catch (error: unknown) | Muss vor Nutzung typengeprüft werden, sicherer als any |
| Best Practice | Vermeide any, nutze unknown + Narrowing, ?. & ?? für Sicherheit |
11. Classes, Access Modifiers & Readonly
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Class Declaration | class Book { title: string; author?: string } | Struktur + Verhalten zusammenfassen |
| Optional Properties | author?: string | Kann weggelassen werden |
| Readonly | readonly title: string | Keine Zuweisung nach Konstruktion |
| Private (# vs private) | private balance: number | Zugriff nur innerhalb der Klasse |
| Protected | protected energy: number | Zugriff nur für Subklassen |
| Best Practice | Klassen für stateful Objekte & Methoden, sonst type/interface |
12. Inheritance & Abstract Classes
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Basic Inheritance | class YouTuber extends ContentCreator | Subklasse erbt Eigenschaften/Methoden |
| Abstract Classes | abstract class Notification { abstract send(): void } | Zwingt Implementierung in Subklassen |
| Concrete vs Abstract Methods | abstract send() vs log() | Teilweise gemeinsame Logik möglich |
| Composition Alternative | Interface + separate Klasse für Verhalten | Flexibler als unnötige Vererbung |
| Best Practice | Verwende extends nur bei klarer Hierarchie, sonst Composition |
13. Interfaces vs Abstract Classes
| Feature | Interface | Abstract Class |
|---|---|---|
| Implementation | ❌ | ✅ (concrete methods) |
| Constructor | ❌ | ✅ |
| Multiple Inheritance | ✅ via implements | ❌ nur single inheritance |
| Fields / Access Modifiers | ❌ | ✅ protected/private |
| Use When | Contract/Shape definieren, mehrere inheritance | Shared logic & member access control |
| Best Practice | Standardmäßig Interface für Typen/Contracts, Abstract Class für Basisklassen mit Logik |
14. Generics
| Feature | Syntax / Example | Notes / Best Practices |
|---|---|---|
| Generic Function | async function fetchData<T>(url: string): Promise<T> | T fungiert als Platzhalter, Typ wird bei Aufruf festgelegt |
| Generic Type Alias | type ApiResponse<T> = { success: boolean; data: T } | Wiederverwendbare, flexible Typdefinition |
| Constraining Generics | function getLength<T extends { length: number }>(value: T) | Einschränkung auf Typen mit bestimmten Eigenschaften |
| Default Generic Type | type ApiResponse<T = string> | Fallback-Typ, wenn kein Typ angegeben wird |
| Generic Function Handling | function handleResponse<T>(res: ApiResponse<T>) | Funktion kann mit jedem T arbeiten, Type Safety bleibt erhalten |
| Best Practice | Generics für wiederverwendbare, typsichere Funktionen/Typen; Constraints & Defaults nutzen für Flexibilität |
15. Built-in Utility Types
| Utility Type | Syntax / Beispiel | Beschreibung |
|---|---|---|
Partial<T> | type User = { | => macht alle Properties des Typs T in der Variablen- deklaration optional |
Required<T> | type Settings = {<Settings> = { | => macht alle Properties des Typs T in der Variablen- deklaration erforderlich |
Readonly<T> | type Book = { | => macht alle Properties des Typs T nach der Variablen- deklaration unveränderbar |
Pick<T, K> | type Contact = { | => erstellt neuen Typ aus übergebenem Typ T, in dem nur die angegeben Object-Keys K valide sind |
Omit<T, K> | type User = { | => erstellt einen Sub-Typ von Typ T, unter Ausschluss der angegebenen Object-Keys K |
Record<K, T> | type Roles = "admin" | "user" | "guest"; | => erstellt ein Objekt, bei dem die Keys vom Typ K sind und die Values vom Typ T |
Exclude<T, U> | type Event = "click" | "hover" | "scroll"; | => erstellt neuen Sub-Typ, der die angegebenen Union-Types U aus Typ T nicht enthält |
Extract<T, U> | type Event = "click" | "hover" | "scroll"; | => erstellt neuen Sub-Typ, der nur angegebene Union-Types U aus Typ T enthält |
NonNullable<T> | type Name = string | null | undefined;userName = null; // ❌ Fehler | => erstellt einen Typ aus T, der weder null noch undefined sein darf |