TypeScript-Hilfsarten — Die Werten zu merken (und die Reste)

Sie haben wahrscheinlich eine TypeScript-Dokumentationsseite gelesen, die 20 oder mehr Hilfsarten alphabetisch aufgelistet hat, jede einzelne in einem Satz definiert und Sie danach verwirrt, welche Sie tatsächlich internalisieren sollen und welche nur für Entwickler von Framework-Internals existieren. Dies ist die ehrlichere Version: acht Typen, konkrete Beispiele vor und nach der Anwendung, und eine klare Antwort auf den täglichen Gebrauch im Vergleich zu den selten nützlichen.

Wenn Sie von reinem JSON ausgehen und noch keine Interfaces geschrieben haben, dann JSON zu TypeScript-Konverter bringt Sie innerhalb von Sekunden zu einer Grundinterfaz – und dann kommen Sie hierher, um diese Hilfsarten darauf aufzubauen.

Partial — Wöchentliche Nutzung. Lernen Sie es zuerst.

Macht jede Eigenschaft in T optional. Der typische Anwendungsfall ist PATCH-artige Aktualisierungen, bei denen nur die geänderten Felder gesendet werden.

// Before: manually duplicating the interface with optional versions of everything
interface UserUpdate {
  name?: string;
  email?: string;
  age?: number;
}

// After: Partial derives it from the source of truth
interface User {
  name: string;
  email: string;
  age: number;
}

function updateUser(id: string, updates: Partial<User>) {
  // updates.name is string | undefined — TypeScript knows
}

Das Problem mit der „Vorher“-Version: Wenn Sie ein Feld zu Userhinzufügen, müssen Sie es auch zu UserUpdate hinzufügen. Mit Partial<User>wird das Hinzufügen eines Feldes zur Quellinterfaz automatisch in Updates verfügbar – die Typen bleiben synchron.

Required — Monatliche Nutzung, aber rettet Sie in einem bestimmten Szenario.

Das Gegenteil von Partial — entfernt alle ? aus einem Typ. Am nützlichsten nach Validierung: Sie erhalten ein objektartiges Konfigurationsobjekt, validieren, dass alle Felder vorhanden sind, und möchten dann, dass TypeScript aufhört, zu schlagen, dass alles möglicherweise undefiniert ist.

// Before: after validating, you still fight undefined checks everywhere
interface Config {
  apiUrl?: string;
  timeout?: number;
  retries?: number;
}

function initApp(config: Config) {
  config.apiUrl?.trim(); // need optional chaining even after checking
}

// After: Required signals "this has been validated, stop warning me"
function validateAndInit(raw: Config): void {
  if (!raw.apiUrl) throw new Error("apiUrl required");
  if (!raw.timeout) throw new Error("timeout required");
  if (!raw.retries) throw new Error("retries required");

  const config = raw as Required<Config>;
  config.apiUrl.trim(); // no optional chaining needed
}

Die ehrliche Bemerkung: Required<T> erfüllt keine Laufzeitvalidierung – Sie müssen dennoch die Prüfungen schreiben. Es ändert nur das, was TypeScript weiter unten annimmt. Verwenden Sie es, um „dieses wurde validiert“ auf der Typebene zu kommunizieren.

Pick — Wöchentliche Nutzung. Nennen Sie, was Sie wollen.

Erstellt einen neuen Typ, der nur die Eigenschaften enthält, die Sie aus Tnennen. Nützlich, wenn Sie einen Teil eines größeren Interfaces benötigen – öffentliche API-Formen, View-Model, serialisierte Antworten.

// Before: manually maintaining a separate interface that drifts from User
interface UserPublicProfile {
  name: string;
  bio: string;
  avatarUrl: string;
}

// After: Pick stays in sync with the source
interface User {
  id: string;
  name: string;
  email: string;       // private — shouldn't go to clients
  passwordHash: string;  // definitely private
  bio: string;
  avatarUrl: string;
}

type UserPublicProfile = Pick<User, "name" | "bio" | "avatarUrl">;

Pick ist das richtige Werkzeug, wenn die Liste der Eigenschaften, die Sie wollen kürzer ist als die Liste, die Sie benötigen würden. excludeWenn es andersherum ist, greifen Sie auf Omit zurück.

Omit — Wöchentliche Nutzung. Nennen Sie, was Sie nicht wollen.

Komplement von Pick – erstellt einen Typ mit allen Eigenschaften von T außer den, die Sie nennen. Wenn Sie ein großes Interface haben und nur einige Felder ausschließen müssen, macht Omit die Absicht klarer als die Aufzählung aller gewünschten Felder.

// Before: manually listing every field except the sensitive ones
// Easy to miss a new field added to User later
interface UserForClient {
  id: string;
  name: string;
  email: string;
  bio: string;
  avatarUrl: string;
  // passwordHash intentionally omitted — but a future dev might not know that
}

// After: Omit states the exclusion explicitly
type UserForClient = Omit<User, "passwordHash">;
// If User gains a new "address" field, UserForClient gets it automatically

Eines der Dinge, das weder Pick noch Omit tun: das Ändern des Typs einzelner Eigenschaften. Wenn Sie Felder aus und verändern möchten, sind Sie auf eine gemappte Typen ausgerichtet, die ein völlig anderes Werkzeug sind.

Record — Wöchentliche Nutzung. Der typisierte Wörterbuch.

Erstellt einen Objekttyp, bei dem alle Schlüssel vom Typ K und alle Werte vom Typ Vsind. Der echte Vorteil kommt, wenn K eine Vereinigungstyp ist – TypeScript zeigt einen Fehler, wenn ein Schlüssel fehlt. Allgemeine Indexsignaturen akzeptieren unvollständige Objekte stumm; Record mit einem Vereinigungsschlüssel tut das nicht.

// Before: index signature with no exhaustiveness checking
const rolePermissions: { [key: string]: string[] } = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  // forgot "viewer" — TypeScript doesn't notice
};

// After: Record with a union key enforces completeness
type Role = "admin" | "editor" | "viewer";

const rolePermissions: Record<Role, string[]> = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  viewer: ["read"],
  // TypeScript error if any Role is missing
  // TypeScript error if you try to add an unknown key
};

Die Exhaustivitätsprüfung ist der echte Vorteil. Sie spielt eine Rolle, wenn die Schlüssel etwas Bedeutungsvolles darstellen – wie Rollen, Ereignistypen, HTTP-Methoden oder Statuscodes – alles, was ein fehlendes Szenario ein Bug ist, nicht nur eine Omission.

ReturnType — Wöchentliche Nutzung, wenn Sie Drittanbieter-Funktionen nutzen.

Extrahiert den Rückgabetyp einer Funktion. Am nützlichsten, wenn Sie eine Bibliotheksfunktion nutzen und eine Variable typisieren möchten, die den Ausgabewert enthält – ohne das Rückgabetyp separat importieren zu müssen (was Bibliotheken nicht immer sauber exportieren).

// Before: manually annotating the return type — it can drift
function getCurrentUser() {
  return { id: "u1", name: "Alice", roles: ["admin"] as const };
}

let cachedUser: { id: string; name: string; roles: readonly string[] };
// If getCurrentUser's return changes, this annotation doesn't update automatically

// After: ReturnType derives it and keeps in sync
type CurrentUser = ReturnType<typeof getCurrentUser>;
let cachedUser: CurrentUser;

// Especially useful with unexported library types:
import { useQuery } from "@tanstack/react-query";
type QueryResult = ReturnType<typeof useQuery>;
// No need to figure out what QueryObserverResult<...> looks like or import it

Parameters — Selten verwendet. Hauptsächlich für Wrapper.

Extrahiert die Parameter-Typen einer Funktion als Tupel. Ehrlicher Standpunkt: Sie werden diese wöchentlich nicht benötigen, es sei denn, Sie schreiben viele Wrapper-Funktionen oder höhere-Ordnung-Tools. Aber wenn Sie es brauchen, gibt es keine saubere Alternative.

// Before: manually duplicating parameter types in the wrapper
function createEvent(
  type: string,
  payload: Record<string, unknown>,
  timestamp: number
) { /* ... */ }

// Every time createEvent changes, this wrapper needs a manual update:
function loggedCreateEvent(
  type: string,
  payload: Record<string, unknown>,
  timestamp: number
) {
  console.log("Creating event:", type);
  return createEvent(type, payload, timestamp);
}

// After: Parameters keeps the wrapper in sync automatically
function loggedCreateEvent(...args: Parameters<typeof createEvent>) {
  console.log("Creating event:", args[0]);
  return createEvent(...args);
}

Das Spread- und Rest-Muster (...args: Parameters<F>) ist das Hauptmuster. Es taucht auch in Test-Mocks auf: jest.fn<ReturnType<F>, Parameters<F>>() gibt Ihnen ein vollständig typisiertes Mock ohne das Importieren der Funktionssignatur separat.

Awaited — Verwenden Sie es, wenn Sie Promise-Typen ohne Aufruf auflösen müssen.

Hinzugefügt in TypeScript 4.5 (im November 2021 veröffentlicht). Rekursiv auflöst Promise<T> um auf Tzuzugreifen. Vorher musste man für den ergebnis-Typ einer asynchronen Funktion eine bedingte Typdefinition schreiben: ReturnType<F> extends Promise<infer U> ? U : never — was bei doppelt verschachtelten Promises fehlschlägt und in Differenzen unangenehm zu lesen ist.

// Before: conditional type to unwrap — breaks on nested Promises
async function fetchUser(id: string) {
  const res = await fetch(`/api/users/${id}`);
  return res.json() as { id: string; name: string; email: string };
}

type FetchedUser =
  ReturnType<typeof fetchUser> extends Promise<infer U> ? U : never;
// Works for Promise<T> but not Promise<Promise<T>>

// After: Awaited handles both cases cleanly
type FetchedUser = Awaited<ReturnType<typeof fetchUser>>;

// Awaited recursively unwraps:
type A = Awaited<Promise<string>>;            // string
type B = Awaited<Promise<Promise<string>>>;  // string
type C = Awaited<string>;                      // string (no-op on non-Promise)

Die Kombination Awaited<ReturnType<typeof fn>> ist es wert, als Einheit zu lernen – sie deckt 90% von asynchronen Typextraktionen in Anwendungscode ab.

Zusammenfassung

Hilfsart	Was es tut	Verwendungs Häufigkeit	Hauptanwendung
Partial<T>	Alle Eigenschaften werden optional	Wöchentlich	PATCH/Aktualisierungs-Payloads
Required<T>	Alle optionalen Eigenschaften werden erforderlich	Monatlich	Nach Validierung „dies ist vollständig“ Signal
Pick<T, K>	Nur die benannten Eigenschaften behält	Wöchentlich	Öffentliche API-Formen, View-Model
Omit<T, K>	Entfernt benannte Eigenschaften	Wöchentlich	Entfernung sensibler oder unwichtiger Felder
Record<K, V>	Objekt mit Schlüsseln vom Typ K und Werten vom Typ V	Wöchentlich	Typisierte Wörterbücher mit Exhaustivitätsprüfung
ReturnType<F>	Extrahiert den Rückgabetyp einer Funktion	Wöchentlich (insbesondere bei Bibliotheken)	Eine Variable vom inferierten oder nicht exportierten Rückgabetyp typisieren
Parameters<F>	Extrahiert die Parameter-Typen einer Funktion als Tupel	Selten	Wrapper-Funktionen, typisierte Mocks
Awaited<T>	Rekursiv auflöst Promise-Typen	Selten	Rückgabetyp einer asynchronen Funktion erhalten

Diejenigen, die nicht auf dieser Liste sind

TypeScript liefert auch Readonly<T>, NonNullable<T>, Extract<T,U>, Exclude<T,U>, InstanceType<C>, ConstructorParameters<C>und mehrere Template-Literal-Typen. Sie sind echt und gelegentlich nützlich, aber tauchen in Bibliotheken, allgemeinen Hilfsfunktionen und Typniveau-Metaprogrammierung auf – nicht in typischen Anwendungslogiken. Wenn Sie die acht oben gelernt haben, suchen Sie die Rest bei Bedarf auf.

Das zugrundeliegende Prinzip ist bei allen gleich: beschreibt eine Transformation eines bestehenden Typs anstatt ihn zu duplizieren. Die spezifischen Hilfsart-Namen sind nur Vokabeln, um diese Absicht gegenüber TypeScript auszudrücken.

Das könnte Ihnen auch gefallen