0Pricing
Frontend Academy · Lektion

Utility-Typen: Partial, Required, Pick, Omit

Transformieren Sie bestehende Typen mit integrierten Utility-Typen, um Varianten ohne Duplikation zu erstellen.

Utility-Typen: Partial, Required, Pick, Omit ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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.

Integrierte Utility Types

TypeScript enthält eine Reihe generischer Utility Types, die andere Typen transformieren. Dadurch müssen Sie ähnliche Interface-Varianten nicht manuell neu schreiben.

Partial<T>

Macht alle Eigenschaften von T optional. Ideal für Update- und Patch-Payloads, bei denen nicht alle Felder angegeben werden müssen.

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

function updateUser(id: string, changes: Partial<User>) {
  // changes.name is string | undefined
  // changes.email is string | undefined
}

updateUser('1', { name: 'Bob' }); // only update name

Required<T>

Das Gegenteil von Partial — macht alle Eigenschaften erforderlich und entfernt optionale (?) Modifikatoren.

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}

function validate(config: Required<Config>) {
  // All three are now required
  console.log(config.host, config.port, config.debug);
}

Pick<T, K>

Erstellt einen Typ, der nur die angegebenen Eigenschaften von T enthält. Nützlich, um große Objekte auf die benötigten Felder zu beschränken.

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

type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to client

Omit<T, K>

Erstellt einen Typ, aus dem die angegebenen Eigenschaften entfernt wurden. Das Gegenstück zu Pick.

type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }

type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yet

Readonly<T>

Macht alle Eigenschaften readonly und verhindert dadurch Neuzuweisungen. Nützlich für Konfigurationsobjekte und unveränderliche Daten.

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<K, V>

Erstellt einen Objekttyp mit Schlüsseln vom Typ K und Werten vom Typ V. Bei einer bekannten Union ist das übersichtlicher als eine rohe Index-Signatur.

type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;

const perms: Permissions = {
  admin:  { canEdit: true,  canDelete: true  },
  editor: { canEdit: true,  canDelete: false },
  viewer: { canEdit: false, canDelete: false },
};

ReturnType<T> und Parameters<T>

Extrahieren den Rückgabetyp und die Parametertypen eines Funktionstyps. Nützlich, wenn Sie einen Typ nicht importieren können, aber die Signatur einer Funktion nachbilden müssen.

function fetchUser(id: number) {
  return { id, name: 'Alice' };
}

type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]

Awaited<T>

Entpackt einen Promise-Typ bis zu seinem aufgelösten Werttyp. Nützlich bei der Arbeit mit asynchronen Funktionen.

type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise

async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }

Extract<T, U> und Exclude<T, U>

Extract<T, U> behält nur die Typen in T, die U zugewiesen werden können. Exclude<T, U> entfernt sie.

type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>;       // 'a' | 'd'

// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // string

Utility Types kombinieren

Utility Types können kombiniert werden, um präzise Typen zu erstellen.

type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional

function patch(id: string, data: UpdatePayload<User>) {
  // data can have any subset of mutable user fields
}

Kurztest

Welcher Utility Type entfernt angegebene Schlüssel aus einem Interface?

Zusammenfassung: Utility Types

Partial macht alle Felder optional. Required entfernt optionale Modifikatoren. Pick behält ausgewählte Schlüssel. Omit entfernt ausgewählte Schlüssel. Readonly verhindert Änderungen. Record ordnet Union-Schlüssel Werttypen zu. ReturnType und Parameters extrahieren Funktionstypen. Kombinieren Sie Utilities zu präzisen DTO-Typen.

Häufig gestellte Fragen

Ist die Lektion „Utility-Typen: Partial, Required, Pick, Omit“ kostenlos?

Ja — der vollständige Text von „Utility-Typen: Partial, Required, Pick, Omit“ 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 „Utility-Typen: Partial, Required, Pick, Omit“?

Transformieren Sie bestehende Typen mit integrierten Utility-Typen, um Varianten ohne Duplikation zu erstellen. 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 2 von 4.

Wie lange dauert die Lektion „Utility-Typen: Partial, Required, Pick, Omit“?

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

  1. Generics: T extends und Constraints
  2. Utility-Typen: Partial, Required, Pick, Omit
  3. Mapped Types und Conditional Types
  4. Narrowing: typeof, instanceof, diskriminierte Unions
← Zurück zu Frontend Academy