Frontend Academy · Lektion

Mapped Types und Conditional Types

Erstellen Sie Mapped Types, um alle Eigenschaften eines Typs zu transformieren, und verwenden Sie Conditional Types mit infer für fortgeschrittene Logik auf Typebene.

Mapped Types und Conditional Types ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Mapped Types — Jede Eigenschaft transformieren

Mapped Types iterieren über die Schlüssel eines Typs und transformieren sie. Sie bilden die Grundlage der Utility Types Partial, Readonly und Record.

// Partial implemented as a mapped type:
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};

// Readonly:
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};

Schlüssel mit as neu zuordnen

Verwenden Sie as in der Mapping-Klausel, um Schlüsselnamen neu zuzuordnen. Kombinieren Sie dies mit Template-Literal-Typen für leistungsfähige Transformationen.

type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K];
};

type UserGetters = Getters<{ name: string; age: number }>;
// { getName: () => string; getAge: () => number }

Eigenschaften mit never filtern

Geben Sie bei der Neuzuordnung eines Schlüssels never zurück, um diese Eigenschaft aus dem resultierenden Typ zu entfernen.

// Keep only function-valued properties:
type FunctionProperties<T> = {
  [K in keyof T as T[K] extends Function ? K : never]: T[K];
};

Bedingte Typen — if/else für Typen

Bedingte Typen verwenden das Muster T extends U ? TrueType : FalseType. Sie werden auf Typebene und nicht zur Laufzeit ausgewertet.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>; // true
type B = IsString<number>; // false

type Flatten<T> = T extends Array<infer E> ? E : T;
type StrArr = Flatten<string[]>; // string
type Num = Flatten<number>;       // number

Distributive bedingte Typen

Wenn T eine Union ist, werden bedingte Typen auf jedes Mitglied verteilt. string | number extends string ? ... prüft jedes Mitglied einzeln: (string extends string ? ...) | (number extends string ? ...).

type ToArray<T> = T extends any ? T[] : never;

type StringOrNumberArray = ToArray<string | number>;
// string[] | number[]  (not (string | number)[])

Mit infer Typen extrahieren

infer R führt eine Typvariable ein, die TypeScript ausfüllt. Dadurch können Sie Teile einer Typstruktur erfassen.

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

type Resolved = UnwrapPromise<Promise<string>>; // string
type Direct = UnwrapPromise<number>;             // number

Template-Literal-Typen

Template-Literal-Typen verwenden dieselbe Backtick-Syntax wie Template-Literale, aber auf Typebene, und erzeugen aus Kombinationen von String-Literalen Union-Typen.

type Side = 'top' | 'right' | 'bottom' | 'left';
type PaddingKey = `padding-${Side}`;
// 'padding-top' | 'padding-right' | 'padding-bottom' | 'padding-left'

type EventName<T extends string> = `on${Capitalize<T>}`;
type ClickEvent = EventName<'click'>; // 'onClick'

Mapped Types und bedingte Typen kombinieren

Die leistungsfähigsten TypeScript-Muster kombinieren beide. Die integrierten Typen required, partial, readonly und record sind allesamt Mapped Types.

// Make all functions in an object async:
type Asyncify<T> = {
  [K in keyof T]: T[K] extends (...args: infer A) => infer R
    ? (...args: A) => Promise<R>
    : T[K];
};

DeepPartial — Rekursiver Utility-Typ

Der integrierte Typ Partial geht nur eine Ebene tief. Ein DeepPartial wendet die Rekursion auch auf verschachtelte Objekte an.

type DeepPartial<T> = {
  [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
};

Praxisanwendung: API-Response-Typen

Mapped Types und Conditional Types ermöglichen leistungsfähige Ableitungen von API-Typen – beispielsweise können Sie nur die JSON-serialisierbaren Eigenschaften eines Objekts extrahieren.

Vermeiden Sie Überengineering

Komplexe Typkonstruktionen können Code schwer verständlich machen. Fragen Sie sich stets: Ist ein einfacherer Typalias oder ein einfacheres Interface klarer? Typen sollten die Absicht dokumentieren und nicht TypeScript-Kenntnisse zur Schau stellen.

Schnelltest

Zu welchem Ergebnis wird T extends U ? A : B ausgewertet, wenn T ein Union-Typ ist?

Zusammenfassung: Mapped Types und Conditional Types

Mapped Types durchlaufen Schlüssel mit [K in keyof T]. Verwenden Sie as, um Schlüssel neu zuzuordnen. Geben Sie never zurück, um zu filtern. Conditional Types: T extends U ? A : B. Mit infer extrahieren Sie Typvariablen. Template-Literal-Typen erstellen String-Unions. Kombinieren Sie beide für leistungsfähige Typtransformationen wie DeepPartial und Asyncify.

Häufig gestellte Fragen

Ist die Lektion „Mapped Types und Conditional Types“ kostenlos?

Ja — der vollständige Text von „Mapped Types und Conditional Types“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Frontend Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Mapped Types und Conditional Types“?

Erstellen Sie Mapped Types, um alle Eigenschaften eines Typs zu transformieren, und verwenden Sie Conditional Types mit infer für fortgeschrittene Logik auf Typebene. Du übst Frontend Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Frontend Academy zu starten?

Keine Vorkenntnisse erforderlich. Frontend Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „Mapped Types und Conditional Types“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Frontend Academy-Lektion Code schreiben und ausführen?

Ja. Jede Frontend Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Generics: T extends und Constraints
Utility-Typen: Partial, Required, Pick, Omit
Mapped Types und Conditional Types
Narrowing: typeof, instanceof, diskriminierte Unions

← Zurück zu Frontend Academy