Tokenlabor

TypeScript Utility Types: alle mit Beispiel

TypeScript Utility Types mit Beispiel: Partial, Required, Pick, Omit, Record, ReturnType, Awaited und mehr, dazu keyof, Conditional und Mapped Types. Durchsuchbar, mit Kopieren-Knopf.

43 Einträge

Objekttypen umbauen

Partial<User>Alle Eigenschaften optional, etwa für Update-Funktionen
Required<User>Alle Eigenschaften Pflicht, das Gegenstück zu Partial
Readonly<User>Alle Eigenschaften schreibgeschützt (nur auf erster Ebene)
Pick<User, "id" | "name">Nur die genannten Eigenschaften übernehmen
Omit<User, "passwort">Alle Eigenschaften außer den genannten
Record<"de" | "en", string>Objekt mit festen Schlüsseln und einheitlichem Werttyp: { de: string; en: string }
Record<string, number>Wörterbuch mit beliebigen Text-Schlüsseln und Zahlen als Werten

Union-Typen filtern

Exclude<"a" | "b" | "c", "a">Entfernt Mitglieder aus einer Union: ergibt "b" | "c"
Extract<"a" | "b" | 1, string>Behält nur passende Mitglieder: ergibt "a" | "b"
NonNullable<string | null | undefined>Entfernt null und undefined: ergibt string

Funktionen und Klassen

ReturnType<typeof f>Rückgabetyp einer Funktion
Parameters<typeof f>Parametertypen als Tupel, etwa [id: number, name: string]
Parameters<typeof f>[0]Typ des ersten Parameters
Awaited<ReturnType<typeof ladeDaten>>Typ, den ein Promise liefert, auch verschachtelt (ab TS 4.5)
ConstructorParameters<typeof Date>Parametertypen eines Konstruktors
InstanceType<typeof Konto>Typ der Instanz, die eine Klasse erzeugt
ThisParameterType<typeof fn>Typ des this-Parameters einer Funktion
OmitThisParameter<typeof fn>Funktionstyp ohne this-Parameter
ThisType<T>Markiert den Typ von this in Objektliteralen (braucht noImplicitThis)
NoInfer<T>Verhindert, dass TypeScript aus diesem Argument einen Typ ableitet (ab TS 5.4)

Texttypen (Intrinsic String Types)

Uppercase<"get">Ergibt "GET"
Lowercase<"GET">Ergibt "get"
Capitalize<"name">Ergibt "Name"
Uncapitalize<"Name">Ergibt "name"
`on${Capitalize<Ereignis>}`Template Literal Type: aus "click" wird "onClick"

Typ-Operatoren

keyof UserUnion aller Schlüssel: "id" | "name" | …
typeof configTyp aus einem vorhandenen Wert ableiten
User["adresse"]Indexed Access: Typ einer einzelnen Eigenschaft
(typeof ROLLEN)[number]Union der Elemente eines as const-Arrays
T extends string ? "text" : "anderes"Conditional Type: Typ abhängig von einer Bedingung
T extends Promise<infer U> ? U : Tinfer: Teiltyp innerhalb einer Bedingung herausziehen
{ [K in keyof T]: T[K] | null }Mapped Type: jede Eigenschaft umwandeln
{ -readonly [K in keyof T]: T[K] }Mapped Type mit -readonly: Schreibschutz entfernen; -? macht Pflicht
{ [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] }Schlüssel beim Mappen umbenennen (Key Remapping)

Nützliche Schreibweisen

const ROLLEN = ["admin", "gast"] as constas const: Werte als schreibgeschützte Literaltypen festhalten
const cfg = { port: 8080 } satisfies Configsatisfies: Typ prüfen, ohne den genauen Literaltyp zu verlieren (ab TS 4.9)
function istText(x: unknown): x is stringType Guard: grenzt den Typ nach einer Prüfung ein
function pruefe(x: unknown): asserts x is stringAssertion-Funktion: wirft sonst einen Fehler
unknown statt anyunknown erzwingt eine Prüfung vor der Nutzung, any schaltet die Prüfung ab
neverTyp ohne Werte, etwa für vollständige switch-Prüfungen
type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K] }Eigener Hilfstyp: Partial für alle Ebenen
type Mutable<T> = { -readonly [K in keyof T]: T[K] }Eigener Hilfstyp: Gegenstück zu Readonly
type ValueOf<T> = T[keyof T]Eigener Hilfstyp: Union aller Werttypen eines Objekts

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

TypeScript Utility Types erklärt

Diese Liste der TypeScript Utility Types enthält alle eingebauten Hilfstypen von Partial, Pick, Omit und Record bis Awaited und NoInfer, dazu die wichtigsten Typ-Operatoren und Schreibweisen wie keyof, Conditional Types, as const und satisfies, zusammen 43 Einträge. Jeder Eintrag zeigt ein kurzes Beispiel und das Ergebnis.

Utility Types leiten neue Typen aus vorhandenen ab, statt sie doppelt zu schreiben. Aus einem Interface User wird mit Partial<User> der Typ für ein Update, mit Omit<User, "passwort"> der Typ für eine öffentliche API-Antwort und mit Pick eine Auswahl einzelner Felder. ReturnType und Parameters übernehmen Typen direkt aus Funktionen, sodass Änderungen automatisch überall ankommen.

Wichtig: Typen gibt es nur beim Kompilieren. Daten aus einer API sind zur Laufzeit nicht geprüft, auch wenn sie als User deklariert sind. Als TypeScript Spickzettel für den Einstieg in eigene Typen eignen sich die Beispiele unten in „Nützliche Schreibweisen“. Typen aus vorhandenem JSON erzeugt das Werkzeug JSON in TypeScript.

Anleitung: TypeScript Utility Types in 3 Schritten

  1. Suchen Sie nach einem Typ wie Omit oder nach einer Aufgabe wie „optional“ oder „Rückgabe“.
  2. Lesen Sie Beispiel und Ergebnis in der Beschreibung; die Gruppe zeigt, ob es ein eingebauter Typ oder ein Typ-Operator ist.
  3. Kopieren Sie das Beispiel mit „Kopieren“ und probieren Sie es im TypeScript Playground oder Ihrem Editor aus.

Typische Anwendungsfälle

  • Aus einem bestehenden Interface Varianten für Formulare, Updates oder API-Antworten ableiten.
  • Rückgabe- und Parametertypen von Funktionen übernehmen, statt sie doppelt zu pflegen.
  • Typen für Konfigurationsobjekte mit Record, as const und satisfies absichern.
  • Eigene Hilfstypen wie DeepPartial mit Mapped und Conditional Types bauen.
Fragen

Häufige Fragen

Was ist der Unterschied zwischen Pick und Omit?

Pick<T, K> übernimmt nur die genannten Schlüssel, Omit<T, K> alle außer den genannten. Bei wenigen benötigten Feldern ist Pick übersichtlicher, bei wenigen auszuschließenden Omit.

Ist Readonly auch für verschachtelte Objekte wirksam?

Nein, Readonly wirkt nur auf die oberste Ebene. Für tiefen Schreibschutz brauchen Sie einen eigenen rekursiven Typ oder as const bei Literalen.

Wann nutze ich Record statt eines Index-Signatur-Typs?

Record<string, number> und { [key: string]: number } sind gleichwertig. Ihre Stärke spielt Record aus, wenn die Schlüssel eine feste Union sind: Dann verlangt TypeScript jeden Schlüssel genau einmal.

Ab welcher Version gibt es Awaited und NoInfer?

Awaited gibt es seit TypeScript 4.5, NoInfer seit 5.4 und satisfies seit 4.9. Die übrigen Typen der Liste sind schon lange Teil von TypeScript.

Was ist der Unterschied zwischen type und interface?

Beide beschreiben Objektformen. interface kann erweitert und mehrfach deklariert werden (Declaration Merging), type kann zusätzlich Union-, Tupel-, Mapped- und Conditional Types ausdrücken. Utility Types funktionieren mit beiden.

Prüft TypeScript Utility Types zur Laufzeit?

Nein. Alle Typen verschwinden beim Kompilieren nach JavaScript. Für Prüfungen zur Laufzeit, etwa von API-Daten, brauchen Sie eine Validierung im Code oder eine Bibliothek wie Zod.

Weitere Werkzeuge

Das könnte auch helfen

Alle 558 Werkzeuge

HTTP-Statuscodes

Alle gängigen HTTP-Statuscodes von 100 bis 511 mit Bedeutung, typischer Ursache und Suche.

Öffnen

HTTP-Header-Referenz

Wichtige Anfrage- und Antwort-Header mit Bedeutung und Beispiel, durchsuchbar.

Öffnen

MIME-Typen

Über 150 MIME-Typen nachschlagen: Dateiendung zu Content-Type und umgekehrt.

Öffnen

Git-Befehle

Git-Spickzettel: die wichtigsten Befehle nach Aufgaben gruppiert, durchsuchbar und kopierbar.

Öffnen

Bash-Befehle

Bash- und Linux-Befehle für Dateien, Text, Prozesse und Netzwerk, mit Suche und Kopieren.

Öffnen

Port-Liste

Bekannte TCP- und UDP-Ports von 20 bis 51820 mit Dienst und Hinweis, durchsuchbar.

Öffnen