Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Utility Types in TypeScript

Utility Types

~16 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

TypeScript bringt eine Sammlung eingebauter, generischer Hilfstypen mit, die bestehende Typen TRANSFORMIEREN, ohne sie neu zu schreiben. Dieses Kapitel stellt die wichtigsten vor, alle direkt an unserem Buch-Interface demonstriert.

Partial<T>: alle Eigenschaften optional machen

function aktualisiereBuch(buch: Buch, updates: Partial<Buch>): Buch {
  return { ...buch, ...updates };
}

aktualisiereBuch(meinBuch, { titel: 'Neuer Titel' });         // ✓ nur EINE Eigenschaft nötig
aktualisiereBuch(meinBuch, { titel: 'X', seitenzahl: 500 }); // ✓ mehrere Eigenschaften

Partial<Buch> erzeugt eine VERSION von Buch, bei der ALLE Eigenschaften mit ? (optional, Kapitel 7) markiert sind – perfekt für "Update"-Funktionen, bei denen nur EINIGE Felder geändert werden sollen.

Required<T> und Readonly<T>: die Gegenstücke

type BuchEntwurf = Partial<Buch>;
type VollstaendigesBuch = Required<BuchEntwurf>; // macht ALLE Eigenschaften wieder PFLICHT

type UnveraenderlichesBuch = Readonly<Buch>; // macht ALLE Eigenschaften readonly (Kapitel 7)

Pick<T, K> und Omit<T, K>: gezielt Eigenschaften auswählen

type BuchVorschau = Pick<Buch, 'titel' | 'autor' | 'coverBildUrl'>;
// { titel: string; autor: Autor; coverBildUrl?: string }

type BuchOhneStatus = Omit<Buch, 'status'>;
// ALLE Eigenschaften von Buch AUSSER 'status'

Pick WÄHLT eine Teilmenge der Eigenschaften AUS (nützlich für schlanke "Vorschau"-Objekte, z. B. für eine Trefferliste), Omit ENTFERNT gezielt Eigenschaften (nützlich, um ein "fast identisches" Interface ohne EINE bestimmte Eigenschaft zu erzeugen).

Record<K, V>: typisierte Objekte mit festen Schlüsseln

type GenreZaehler = Record<Genre, number>;

const zaehler: GenreZaehler = {
  Fantasy: 0,
  Krimi: 0,
  SachBuch: 0,
  Biografie: 0,
  Roman: 0,
  Kinderbuch: 0,
}; // JEDER Genre-Wert MUSS als Schlüssel vorhanden sein - kein Vergessen möglich

Record<Genre, number> erzwingt ein Objekt, bei dem JEDER mögliche Genre-Wert (aus unserer Literal-Union, Kapitel 10) als Schlüssel vorhanden sein MUSS – fehlt einer, zeigt TypeScript SOFORT einen Fehler, wo ein normales {{ [key: string]: number }} das nicht könnte.

Exclude<T, U> und Extract<T, U>: Unions filtern

type AlleStatus = 'verfuegbar' | 'ausgeliehen' | 'reserviert' | 'verloren';
type AktiveStatus = Exclude<AlleStatus, 'verloren'>;
// 'verfuegbar' | 'ausgeliehen' | 'reserviert'

type ProblemStatus = Extract<AlleStatus, 'verloren' | 'beschaedigt'>;
// nur 'verloren' - 'beschaedigt' existiert gar nicht in AlleStatus, wird ignoriert

ReturnType<T> und Parameters<T>: Funktionstypen ableiten

Erinnern Sie sich an RootState = ReturnType<typeof store.getState> aus "React für Profis" Kapitel 40? Dasselbe Werkzeug, hier ohne Framework-Kontext erklärt:

function erstelleBuch(titel: string, seitenzahl: number): Buch {
  /* ... */
  return {} as Buch;
}

type ErstellteBuchArt = ReturnType<typeof erstelleBuch>; // Buch
type ErstelleBuchParameter = Parameters<typeof erstelleBuch>; // [string, number]

ReturnType/Parameters LEITEN den Typ AUTOMATISCH aus einer BESTEHENDEN Funktion ab – ändert sich die Funktion später, passen sich diese abgeleiteten Typen AUTOMATISCH mit an, statt manuell nachgepflegt werden zu müssen (GENAU dasselbe Prinzip wie bei RootState).

Tipp: Faustregel: bevor Sie einen neuen Typ von Hand schreiben, prüfen Sie, ob ein Utility Type das Problem bereits löst – Partial/Pick/Omit decken die MEISTEN alltäglichen "Typ X, aber leicht abgewandelt"-Fälle ab, ohne Duplikation. Eine vollständige Liste findet sich in der offiziellen TypeScript-Dokumentation unter "Utility Types".