Appearance
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 aktualisieren9.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; // ❌ Fehler9.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-Typ | Beschreibung | Beispiel |
|---|---|---|
Record<K, T> | Objekt mit Schlüsseltyp K und Werttyp T | Record<string, number> |
Parameters<T> | Parametertypen einer Funktion | Parameters<typeof myFunc> |
ConstructorParameters<T> | Parametertypen eines Konstruktors | ConstructorParameters<typeof MyClass> |
InstanceType<T> | Instanztyp einer Klasse | InstanceType<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 ausOmit: 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!
