TypeScript Fortgeschrittene Typen Anleitung

# TypeScript Fortgeschrittene Typen

Lernen Sie fortgeschrittene TypeScript-Konzepte für robuste und typsichere Anwendungen.

## Generics (Generische Typen)

```typescript
// Generische Funktion
function ersteElement<T>(array: T[]): T | undefined {
  return array[0];
}

const zahlen = ersteElement([1, 2, 3]); // Typ: number
const texte = ersteElement(["a", "b"]); // Typ: string

// Generische Schnittstelle
interface ApiAntwort<T> {
  daten: T;
  erfolg: boolean;
  nachricht?: string;
  zeitstempel: Date;
}

interface Benutzer {
  id: string;
  name: string;
  email: string;
}

async function holeBenutzer(id: string): Promise<ApiAntwort<Benutzer>> {
  const antwort = await fetch(`/api/benutzer/${id}`);
  return antwort.json();
}
```

## Utility Types (Hilfstypen)

```typescript
interface Produkt {
  id: string;
  name: string;
  preis: number;
  beschreibung: string;
  lagerbestand: number;
  erstelltAm: Date;
}

// Partial - Alle Eigenschaften optional
type ProduktAktualisierung = Partial<Produkt>;

// Pick - Nur bestimmte Eigenschaften
type ProduktVorschau = Pick<Produkt, "id" | "name" | "preis">;

// Omit - Bestimmte Eigenschaften ausschließen
type NeuesProdukt = Omit<Produkt, "id" | "erstelltAm">;

// Required - Alle Eigenschaften erforderlich
type VollständigesProdukt = Required<Produkt>;

// Readonly - Alle Eigenschaften nur lesbar
type UnveränderlichesProdukt = Readonly<Produkt>;

// Record - Objekttyp mit bestimmten Schlüsseln
type ProduktKatalog = Record<string, Produkt>;
```

## Conditional Types (Bedingte Typen)

```typescript
// Einfacher bedingter Typ
type IstString<T> = T extends string ? true : false;

type Test1 = IstString<string>;  // true
type Test2 = IstString<number>;  // false

// Extraktion von Array-Elementtypen
type ArrayElement<T> = T extends (infer E)[] ? E : never;

type ZahlenElement = ArrayElement<number[]>; // number

// Funktion Rückgabetyp extrahieren
type RückgabeTyp<T> = T extends (...args: any[]) => infer R ? R : never;

function holeZahl(): number {
  return 42;
}

type Ergebnis = RückgabeTyp<typeof holeZahl>; // number
```

## Type Guards (Typwächter)

```typescript
interface Hund {
  art: "hund";
  bellen: () => void;
}

interface Katze {
  art: "katze";
  miauen: () => void;
}

type Haustier = Hund | Katze;

// Typwächter-Funktion
function istHund(tier: Haustier): tier is Hund {
  return tier.art === "hund";
}

function tierGeräusch(tier: Haustier) {
  if (istHund(tier)) {
    tier.bellen(); // TypeScript weiß, dass tier ein Hund ist
  } else {
    tier.miauen(); // TypeScript weiß, dass tier eine Katze ist
  }
}

// Assertion-Funktion
function assertIstString(wert: unknown): asserts wert is string {
  if (typeof wert !== "string") {
    throw new Error("Wert muss ein String sein");
  }
}
```

## Mapped Types (Abgebildete Typen)

```typescript
interface Formular {
  benutzername: string;
  email: string;
  passwort: string;
}

// Alle Felder nullable machen
type Nullable<T> = {
  [K in keyof T]: T[K] | null;
};

type NullbaresFormular = Nullable<Formular>;

// Felder mit Getter-Funktionen
type Getter<T> = {
  [K in keyof T as `hole${Capitalize<string & K>}`]: () => T[K];
};

type FormularGetter = Getter<Formular>;
// { holeBenutzername: () => string; holeEmail: () => string; ... }
```

Diese Anleitung hilft deutschen Entwicklern, TypeScript-Typen vollständig zu verstehen.