Skip to content

Kapitel 9: Tool-Typen (Utility Types)

🎯 Lernziele

In diesem Kapitel lernen Sie:

  • Partial<T> – Alle Eigenschaften optional machen
  • Required<T> – Alle Eigenschaften pflicht machen
  • Readonly<T> – Alle Eigenschaften schreibgeschützt
  • Pick<T, K> – Eigenschaften auswählen
  • Omit<T, K> – Eigenschaften ausschließen
  • Exclude<T, U> – Typen ausschließen
  • Extract<T, U> – Typen extrahieren
  • ReturnType<T> – Rückgabetyp extrahieren

9.1 Partial<T> – Alles optional

📖 Einfache Definition

Macht alle Eigenschaften eines Typs optional.

💻 Code-Beispiel

typescript
interface User {
  id: number;
  name: string;
  age: number;
}

// Partial macht alles optional
type PartialUser = Partial<User>;

// Alle Eigenschaften sind jetzt optional
const user1: PartialUser = {};  // ✅ Erlaubt
const user2: PartialUser = { name: "Max" };  // ✅ Erlaubt
const user3: PartialUser = { name: "Max", age: 25 };  // ✅ Erlaubt

🎨 Praxis-Beispiel

typescript
// Update-Funktion (nur einige Felder aktualisieren)
function updateUser(id: number, updates: Partial<User>): void {
  // ... Aktualisiert nur die übergebenen Felder
  console.log(`Aktualisiere Benutzer ${id}`, updates);
}

updateUser(1, { name: "Maria" });  // Nur name aktualisieren
updateUser(2, { age: 30 });        // Nur age aktualisieren

9.2 Required<T> – Alles pflicht

📖 Einfache Definition

Macht alle Eigenschaften eines Typs pflicht.

💻 Code-Beispiel

typescript
interface User {
  id?: number;      // Optional
  name?: string;     // Optional
  age?: number;      // Optional
}

// Required macht alles pflicht
type RequiredUser = Required<User>;

// Alle Eigenschaften sind jetzt pflicht
const user1: RequiredUser = {
  id: 1,
  name: "Max",
  age: 25
};  // ✅ Erforderlich

// ❌ Fehler: Eigenschaften fehlen
const user2: RequiredUser = { name: "Max" };

9.3 Readonly<T> – Alles schreibgeschützt

📖 Einfache Definition

Macht alle Eigenschaften eines Typs schreibgeschützt (readonly).

💻 Code-Beispiel

typescript
interface User {
  id: number;
  name: string;
  age: number;
}

// Readonly macht alles schreibgeschützt
type ReadonlyUser = Readonly<User>;

const user: ReadonlyUser = {
  id: 1,
  name: "Max",
  age: 25
};

// ❌ Fehler: Schreibgeschützt!
user.id = 2;
user.name = "Maria";

🎨 Praxis-Beispiel

typescript
// Konfiguration, die nicht geändert werden darf
const config: Readonly<{
  apiUrl: string;
  timeout: number;
}> = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

// ❌ Fehler: Kann nicht geändert werden
config.apiUrl = "https://other-api.com";

9.4 Pick<T, K> – Eigenschaften auswählen

📖 Einfache Definition

Wählt bestimmte Eigenschaften aus einem Typ aus.

💻 Code-Beispiel

typescript
interface User {
  id: number;
  name: string;
  age: number;
  email: string;
  address: string;
}

// Pick: Nur id und name auswählen
type UserNameAndId = Pick<User, "id" | "name">;

const user: UserNameAndId = {
  id: 1,
  name: "Max"
};  // ✅ Erlaubt

// ❌ Fehler: age fehlt nicht in Pick
const user2: UserNameAndId = { id: 2, name: "Maria", age: 25 };

🎨 Praxis-Beispiel

typescript
// API-Response (nur einige Felder zurückgeben)
type UserResponse = Pick<User, "id" | "name" | "email">;

function getUser(): UserResponse {
  return {
    id: 1,
    name: "Max",
    email: "max@example.com"
  };
}

9.5 Omit<T, K> – Eigenschaften ausschließen

📖 Einfache Definition

Entfernt bestimmte Eigenschaften aus einem Typ.

💻 Code-Beispiel

typescript
interface User {
  id: number;
  name: string;
  age: number;
  email: string;
  password: string;  // Sensitiv!
}

// Omit: password ausschließen
type PublicUser = Omit<User, "password">;

const user: PublicUser = {
  id: 1,
  name: "Max",
  age: 25,
  email: "max@example.com"
};  // ✅ Erlaubt (ohne password)

// ❌ Fehler: password ist ausgeschlossen
const user2: PublicUser = {
  id: 1,
  name: "Max",
  age: 25,
  email: "max@example.com",
  password: "12345"  // Nicht erlaubt!
};

🎨 Praxis-Beispiel

typescript
// Beim Erstellen eines Benutzers: password ist erforderlich
type CreateUserDto = Omit<User, "id">;  // id wird automatisch generiert

function createUser(data: CreateUserDto): User {
  return {
    id: Math.random(),  // id generieren
    ...data
  };
}

9.6 Exclude<T, U> – Typen ausschließen

📖 Einfache Definition

Entfernt Typen aus einem Union Type.

💻 Code-Beispiel

typescript
type AllColors = "red" | "green" | "blue" | "yellow";

// Exclude: yellow ausschließen
type PrimaryColors = Exclude<AllColors, "yellow">;

// PrimaryColors = "red" | "green" | "blue"

const color1: PrimaryColors = "red";     // ✅ Erlaubt
const color2: PrimaryColors = "yellow";  // ❌ Fehler

🎨 Praxis-Beispiel

typescript
type AllStatus = "pending" | "success" | "error" | "cancelled";

// Nur aktive Status
type ActiveStatus = Exclude<AllStatus, "cancelled">;

function handleStatus(status: ActiveStatus): void {
  // ...
}

9.7 Extract<T, U> – Typen extrahieren

📖 Einfache Definition

Extrahiert Typen aus einem Union Type, die einem anderen Typ entsprechen.

💻 Code-Beispiel

typescript
type AllTypes = string | number | boolean | object;

// Extract: Nur string und number extrahieren
type StringOrNumber = Extract<AllTypes, string | number>;

// StringOrNumber = string | number

const value1: StringOrNumber = "Hallo";  // ✅ Erlaubt
const value2: StringOrNumber = 123;      // ✅ Erlaubt
const value3: StringOrNumber = true;      // ❌ Fehler

9.8 ReturnType<T> – Rückgabetyp extrahieren

📖 Einfache Definition

Extrahiert den Rückgabetyp einer Funktion.

💻 Code-Beispiel

typescript
function createUser() {
  return {
    id: 1,
    name: "Max",
    email: "max@example.com"
  };
}

// ReturnType: Rückgabetyp der Funktion extrahieren
type User = ReturnType<typeof createUser>;

// User = { id: number; name: string; email: string; }

const user: User = {
  id: 2,
  name: "Maria",
  email: "maria@example.com"
};

🎨 Praxis-Beispiel

typescript
// API-Funktion
async function fetchUser() {
  const response = await fetch("https://api.example.com/user");
  return response.json();
}

// Rückgabetyp extrahieren
type FetchUserReturn = ReturnType<typeof fetchUser>;

// Dann verwenden...

9.9 Weitere nützliche Tool-Typen

📋 Übersicht

Tool-TypBeschreibungBeispiel
Record<K, T>Objekt mit Schlüsseltyp K und Werttyp TRecord<string, number>
Parameters<T>Parametertypen einer FunktionParameters<typeof myFunc>
ConstructorParameters<T>Parametertypen eines KonstruktorsConstructorParameters<typeof MyClass>
InstanceType<T>Instanztyp einer KlasseInstanceType<typeof MyClass>

💻 Code-Beispiel

typescript
// Record<K, T>
type UserRoles = Record<string, "admin" | "user" | "guest">;

const roles: UserRoles = {
  "max": "admin",
  "maria": "user",
  "guest": "guest"
};

// Parameters<T>
function greet(name: string, age: number): string {
  return `Hallo ${name}, du bist ${age} Jahre alt!`;
}

type GreetParams = Parameters<typeof greet>;  
// GreetParams = [name: string, age: number]

📝 Zusammenfassung

In diesem Kapitel haben Sie gelernt:

  • Partial<T> – Macht alles optional
  • Required<T> – Macht alles pflicht
  • Readonly<T> – Macht alles schreibgeschützt
  • Pick<T, K> – Wählt Eigenschaften aus
  • Omit<T, K> – Entfernt Eigenschaften
  • Exclude<T, U> – Entfernt Typen aus Union
  • Extract<T, U> – Extrahiert Typen aus Union
  • ReturnType<T> – Extrahiert Rückgabetyp

🎯 Nächstes Kapitel

Im Kapitel 10 lernen wir Modularisierung und Projektstruktur in TypeScript!

👉 Weiter zu Kapitel 10: Modularisierung


❓ Häufig gestellte Fragen

F: Wann sollte ich Partial<T> verwenden?

A: Bei Update-Operationen, wo nur einige Felder geändert werden sollen.

F: Was ist der Unterschied zwischen Pick und Omit?

A:

  • Pick: Wählt bestimmte Eigenschaften aus
  • Omit: Entfernt bestimmte Eigenschaften

F: Kann ich mehrere Tool-Typen kombinieren?

A: Ja! Beispiel: Partial<Pick<User, "name" | "age">>


🎉 Herzlichen Glückwunsch! Sie haben Kapitel 9 abgeschlossen!

Frei für alle Anfänger