Utility-Typen

TypeScript bietet verschiedene globale Hilfstypen (Utility Types), um gängige Typtransformationen zu erleichtern. Diese Typen sind generisch und ermöglichen es, neue Typen deklarativ aus bestehenden zu erstellen.

Die fünf am häufigsten verwendeten Hilfstypen sind:

1. Partial<T>

Macht alle Eigenschaften eines Typs T optional. Dies ist äußerst nützlich für Aktualisierungsfunktionen (Update/Patch), bei denen der Benutzer möglicherweise nur eine Teilmenge der Felder angibt:

interface User {
  id: number;
  name: string;
  email: string;
}

// Alle Eigenschaften von User werden optional: { id?: number; name?: string; email?: string; }
type UserUpdate = Partial<User>;

2. Readonly<T>

Macht alle Eigenschaften eines Typs T schreibgeschützt (readonly). Jeder Versuch, eine Eigenschaft neu zuzuweisen, führt zu einem Compiler-Fehler zur Kompilierzeit:

interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 20 };
// p.x = 5; // Fehler: Sie können 'x' keine Werte zuweisen, da es sich um eine schreibgeschützte Eigenschaft handelt

3. Pick<T, Keys>

Erstellt einen Typ, indem nur eine bestimmte Menge von Schlüsseln (dargestellt durch eine Union von Strings) aus dem Typ T ausgewählt wird:

interface Article {
  id: number;
  title: string;
  content: string;
  views: number;
}

// Wählt nur 'title' und 'views' aus: { title: string; views: number; }
type ArticlePreview = Pick<Article, 'title' | 'views'>;

4. Omit<T, Keys>

Erstellt einen Typ, indem eine bestimmte Menge von Schlüsseln aus dem Typ T entfernt wird. Es ist das Gegenstück zu Pick:

interface Product {
  id: number;
  name: string;
  price: number;
  secretVendorCode: string;
}

// Entfernt 'secretVendorCode': { id: number; name: string; price: number; }
type PublicProduct = Omit<Product, 'secretVendorCode'>;

5. Record<Keys, Type>

Erstellt einen Objekttyp, dessen Schlüssel Keys und dessen Werte vom Typ Type sind. Dies ist sehr nützlich, um Schlüssel Werten zuzuordnen, Wörterbücher oder Hash-Tabellen (Key-Value-Maps) darzustellen:

type Page = 'home' | 'about' | 'contact';

interface PageInfo {
  title: string;
}

// Erstellt ein Wörterbuch mit den Schlüsseln 'home' | 'about' | 'contact' und Werten PageInfo
const nav: Record<Page, PageInfo> = {
  home: { title: 'Home Page' },
  about: { title: 'About Us' },
  contact: { title: 'Contact Us' },
};

Probier es aus

Aufgabe 1: Profilaktualisierung mit Partial

Aufgabe 2: Entfernen sensibler Felder mit Omit

Aufgabe 3: Öffentliche Konfiguration mit Pick und Readonly

Aufgabe 4: Benutzerverzeichnis mit Record und Readonly