keyof und typeof: Typen aus Werten ableiten

1. Warum Typen aus Werten ableiten sinnvoller ist als sie zu duplizieren

In jedem größeren TypeScript-Projekt tauchen früher oder später Typdefinitionen auf, die exakt die Struktur eines bereits existierenden Werts nachbilden: ein Interface, das die Felder eines Konfigurationsobjekts wiederholt, oder eine Union aus String-Literalen, die exakt den erlaubten Werten eines Arrays entspricht. Diese doppelte Pflege ist eine der häufigsten Quellen für stille Inkonsistenzen, weil der Compiler zwei getrennte Deklarationen nicht automatisch synchron hält. Ändert sich das Objekt, bleibt der Typ unbemerkt veraltet, bis irgendwo im Code ein falscher Zugriff durchrutscht.

Die Operatoren keyof und typeof lösen dieses Problem an der Wurzel, indem sie Typen nicht manuell definieren, sondern direkt aus vorhandenen Werten und Typdeklarationen ableiten. keyof extrahiert die Schlüssel eines Objekttyps als Union, typeof liest den statischen Typ eines konkreten Wertes aus. Zusammen mit as const und Indexed Access Types entsteht daraus ein kompaktes Werkzeug-Set für typsichere Zugriffsfunktionen, literale Konfigurationswerte und Utility-Types, die sich automatisch an Änderungen im Quellcode anpassen, statt bei jeder Anpassung manuell nachgezogen werden zu müssen.

2. keyof: Die Schlüssel eines Objekttyps als Union

Der keyof Operator wandelt einen Objekttyp in eine Union aus String-Literal-Typen um, die genau den Schlüsseln dieses Typs entsprechen. Bei einem Interface User mit den Feldern id, name, email und isActive liefert keyof User exakt die Union 'id' | 'name' | 'email' | 'isActive'. Diese Union lässt sich überall dort einsetzen, wo bisher ein loser string-Typ verwendet wurde, etwa als Parametertyp einer Funktion, die einen gültigen Property-Namen erwartet. Der entscheidende Vorteil gegenüber einer manuell geschriebenen Union: Sie bleibt automatisch korrekt, wenn dem Interface später ein Feld hinzugefügt oder entfernt wird.

keyof funktioniert nicht nur mit Interfaces, sondern mit jedem Objekttyp, einschließlich type-Aliassen, Klassen-Instanztypen und Index-Signaturen. Bei einer Index-Signatur wie [key: string]: number liefert keyof allerdings string | number statt nur string, weil JavaScript numerische Objektschlüssel intern als Strings behandelt. Wer diese Feinheit nicht kennt, wundert sich oft über einen scheinbar zu breiten Rückgabetyp, obwohl der Compiler hier technisch korrekt arbeitet.

// keyof extracts the union of an object type's keys as string literal types
interface User {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
}

// UserKeys is the union: "id" | "name" | "email" | "isActive"
type UserKeys = keyof User;

function printKey(key: UserKeys): void {
  console.log(key);
}

printKey("name");     // OK
// printKey("age");   // Error: Argument of type '"age"' is not assignable...

// keyof also works with index signatures
interface Dictionary {
  [key: string]: number;
}

// DictKeys is "string | number" because JS object keys can be numeric strings
type DictKeys = keyof Dictionary; // string | number

3. keyof mit Generics: typsicherer Zugriff auf Objekteigenschaften

Der eigentliche Nutzen von keyof zeigt sich in Kombination mit Generics, wenn eine Funktion typsicher auf beliebige Eigenschaften eines beliebigen Objekttyps zugreifen soll. Das Standardmuster lautet function getProp<T, K extends keyof T>(obj: T, key: K): T[K]. Der Constraint K extends keyof T stellt sicher, dass nur Schlüssel akzeptiert werden, die im übergebenen Objekt tatsächlich existieren, und T[K] als Rückgabetyp sorgt dafür, dass der Compiler den exakten Eigenschaftstyp inferiert statt eines generischen any oder unknown.

Ohne diesen Constraint bliebe key vom Typ string, und der Zugriff obj[key] würde nicht kompilieren, weil ein beliebiger String kein gültiger Index für einen konkreten Objekttyp ist. Genau dieser Fehler zeigt, wie eng keyof, Generics und Indexed Access Types zusammenspielen: keyof liefert die erlaubten Schlüssel, der generische Constraint bindet sie an das konkrete Objekt, und T[K] übersetzt den Schlüssel in den passenden Werttyp. Das Ergebnis ist eine wiederverwendbare Funktion, die für jedes Objekt und jeden gültigen Schlüssel korrekt typisiert bleibt, ganz ohne Type-Assertions oder any.

// Generic, type-safe property access: K is constrained to the keys of T
function getProp<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

interface Product {
  sku: string;
  price: number;
  inStock: boolean;
}

const product: Product = { sku: "MS-1001", price: 49.9, inStock: true };

const price = getProp(product, "price");   // inferred as number
const sku = getProp(product, "sku");       // inferred as string

// getProp(product, "weight"); // Error: "weight" is not assignable to keyof Product

// Without the constraint, key would be typed as `string` and the access
// would fail to compile, because an arbitrary string cannot index type T
function unsafeGetProp<T>(obj: T, key: string) {
  // return obj[key]; // Error: cannot use 'string' to index type 'T'
}

4. typeof: Type-Level-Operator vs. Laufzeit-Operator

TypeScript überlädt das Schlüsselwort typeof mit einer zweiten Bedeutung, die viele Entwickler anfangs verwirrt, weil sie aus JavaScript bereits den Laufzeitoperator kennen. JavaScripts typeof wertet zur Laufzeit aus und liefert einen String wie 'number', 'string', 'object' oder 'function' zurück, sichtbar auch im kompilierten JavaScript-Output. Dieser Operator steht immer in einer Ausdrucksposition, etwa in console.log(typeof value) oder einer if-Bedingung, und existiert unverändert seit den Anfängen von JavaScript.

TypeScripts typeof dagegen steht in einer Typposition und wird ausschließlich zur Kompilierzeit ausgewertet, ohne jede Spur im generierten JavaScript zu hinterlassen. type Config = typeof config liest den von TypeScript inferierten Typ der Variable config aus und macht ihn als eigenständigen Typ wiederverwendbar. Der Compiler unterscheidet die beiden Bedeutungen ausschließlich anhand der Position: Steht typeof vor einem Ausdruck, ist es JavaScript, steht es nach type oder in einer anderen Typposition, ist es TypeScripts Type-Level-Operator.

// JavaScript's runtime typeof operator: evaluates at runtime, returns a string
const answer = 42;
console.log(typeof answer); // runtime typeof -> "number" (a string value)

// TypeScript's typeof operator: evaluates at compile time, returns a TYPE
const config = {
  apiUrl: "https://api.mironsoft.de",
  timeout: 5000,
  retries: 3,
};

// type-level typeof reads the inferred type of `config`, not a runtime string
type Config = typeof config;
// Config is: { apiUrl: string; timeout: number; retries: number }

// The two operators share a keyword but never overlap in position:
// - typeof x in an EXPRESSION position is JavaScript's runtime operator
// - typeof x in a TYPE position is TypeScript's compile-time operator
function describe(value: unknown): string {
  return typeof value; // runtime typeof, executes in the compiled JS output
}

let sameShape: typeof config; // type-level typeof, erased before runtime

5. typeof und keyof kombiniert: Typen aus Konstanten ableiten

Die eigentliche Stärke von typeof zeigt sich in Kombination mit keyof, wenn Typen nicht aus einem manuell geschriebenen Interface, sondern direkt aus einem bestehenden Konstanten- oder Konfigurationsobjekt abgeleitet werden sollen. Das Muster keyof typeof config leitet zunächst mit typeof den vollständigen Typ des Objekts config ab und extrahiert anschließend mit keyof die Union seiner Schlüssel. Damit entfällt jede manuelle Typdeklaration für Objekte, deren Struktur sich ohnehin im Quellcode befindet.

Dieses Muster ist besonders praktisch für enum-ähnliche Konstantenobjekte, etwa eine Sammlung von Feature-Flags oder Konfigurationsschlüsseln, die im Code sowieso als Objekt existieren. Statt ein paralleles Interface oder einen Union-Typ von Hand zu pflegen, wird der Typ direkt aus dem Objekt gewonnen und bleibt garantiert synchron. Ändert sich das Objekt, etwa durch ein neues Feature-Flag, aktualisiert sich der abgeleitete Typ beim nächsten Kompilierlauf automatisch mit, ohne dass irgendwo im Code manuell nachgezogen werden muss.

6. as const und typeof: Literale Union-Typen aus Arrays und Objekten

Ohne zusätzliche Hinweise weitet TypeScript die Typen von Array- und Objektliteralen standardmäßig auf ihre allgemeinen Basistypen: Ein Array aus String-Literalen wird zu string[], eine Zahl zu number. Die as const Assertion unterbindet dieses Weiten, macht die Struktur readonly und behält die exakten Literaltypen jedes Elements bei. Kombiniert mit typeof und einem Indexed Access Type wie (typeof roles)[number] entsteht daraus eine präzise Union aus genau den Literalwerten, die im Array tatsächlich vorkommen.

Dasselbe Muster funktioniert auch für Objektliterale: (typeof httpStatus)[keyof typeof httpStatus] liefert die Union aller Werte eines mit as const deklarierten Objekts, etwa 200 | 404 | 500 für ein Status-Code-Mapping. Dieses Vorgehen ersetzt in vielen Fällen klassische TypeScript-Enums, weil es ohne zusätzliche Laufzeit-Konstrukte auskommt und sich nahtlos mit anderen Utility-Types kombinieren lässt. Wer as const vergisst, verliert die Literaltypen und erhält stattdessen breite Typen wie string oder number, was den gesamten abgeleiteten Union-Typ nutzlos macht.

// Without "as const", TypeScript widens the array element type to string
const rolesWide = ["admin", "editor", "viewer"];
type RoleWide = typeof rolesWide[number]; // widened to: string

// "as const" makes the array readonly and preserves the literal types
const roles = ["admin", "editor", "viewer"] as const;

// typeof roles is: readonly ["admin", "editor", "viewer"]
// indexing with [number] yields the union of all literal element types
type Role = (typeof roles)[number]; // "admin" | "editor" | "viewer"

function assignRole(role: Role): void {
  // role is now restricted to the three literal strings above
}

assignRole("editor");   // OK
// assignRole("guest"); // Error: not assignable to type 'Role'

// The same pattern works on object literals for their value union
const httpStatus = {
  OK: 200,
  NOT_FOUND: 404,
  SERVER_ERROR: 500,
} as const;

type HttpStatusCode = (typeof httpStatus)[keyof typeof httpStatus]; // 200 | 404 | 500

7. Indexed Access Types: T[K] gezielt einsetzen

Indexed Access Types greifen mit derselben eckigen-Klammer-Syntax wie ein Laufzeit-Property-Zugriff auf den Typ einer einzelnen Eigenschaft zu. Order['total'] liefert den Typ der total-Eigenschaft, und diese Zugriffe lassen sich beliebig verschachteln: Order['customer']['name'] navigiert durch verschachtelte Objektstrukturen genauso, wie es der entsprechende Laufzeit-Zugriff auch tun würde. Der Schlüssel in der eckigen Klammer muss dabei ein tatsächlicher Schlüssel des Typs sein, sonst meldet der Compiler einen Fehler.

Wird statt eines einzelnen Schlüssels eine Union übergeben, etwa Order['id' | 'total'], liefert TypeScript die Union der entsprechenden Eigenschaftstypen zurück, in diesem Fall string | number. Kombiniert man das mit keyof direkt, ergibt T[keyof T] die Union sämtlicher Eigenschaftstypen eines Objekts. Dieses Muster bildet die Grundlage vieler eingebauter Utility-Types wie Pick und Record und lässt sich auch in eigenen generischen Hilfstypen wiederverwenden, etwa um den Typ einer beliebigen, aber garantiert gültigen Eigenschaft zu extrahieren.

interface Order {
  id: string;
  total: number;
  customer: {
    name: string;
    email: string;
  };
}

// Indexed access with a single literal key
type OrderId = Order["id"]; // string

// Nested indexed access reaches into a property's own properties
type CustomerName = Order["customer"]["name"]; // string

// Indexed access with a union of keys returns a union of the matching types
type OrderPrimitive = Order["id" | "total"]; // string | number

// Combined with keyof, T[keyof T] yields the union of ALL property types
type OrderValue = Order[keyof Order]; // string | number | { name: string; email: string }

// A generic helper that extracts a nested property type safely
type PropType<T, K extends keyof T> = T[K];
type TotalType = PropType<Order, "total">; // number

8. Typische Stolperfallen bei keyof und typeof

Die häufigste Verwechslung entsteht, wenn Entwickler versuchen, den Typ eines Wertes mit dem falschen typeof zu ermitteln: JavaScripts typeof in einer Bedingung liefert zur Laufzeit einen String und eignet sich für Typ-Guards, aber nicht dafür, einen wiederverwendbaren TypeScript-Typ zu erzeugen. Wer type X = typeof someValue schreibt in der Annahme, damit eine Laufzeitprüfung zu bauen, verwechselt die beiden Bedeutungen und wird vom Compiler in eine andere Richtung geschickt als beabsichtigt.

Eine zweite Falle betrifft das Vergessen von as const: Ohne die Assertion weitet TypeScript Array-Literale, sodass (typeof arr)[number] statt der erwarteten Literal-Union nur zu string oder number wird. Eine dritte Falle ist keyof auf Klassen: Nur öffentliche Member erscheinen in der Union, private und protected Eigenschaften werden ausgeschlossen, was bei Refactorings zu unerwartet kleineren Typen führt. Wer diese drei Muster kennt, JS-typeof versus TS-typeof, as const versus Weiten, und Sichtbarkeit bei Klassen, vermeidet die überwiegende Mehrheit der Verwirrung rund um beide Operatoren.

9. keyof und typeof im Vergleich

Die folgende Übersicht stellt unpräzise, manuell gepflegte Patterns den entsprechenden idiomatischen Lösungen mit keyof und typeof gegenüber. In jeder Zeile führt die linke Spalte zu Drift zwischen Code und Typ oder zu schwächerer Typsicherheit, während die rechte Spalte den Typ direkt aus dem tatsächlichen Wert ableitet.

In der Praxis lohnt sich die rechte Spalte fast immer, selbst wenn die manuelle Variante auf den ersten Blick einfacher wirkt: Der Aufwand für keyof und typeof entsteht einmal bei der Definition, während die manuelle Alternative bei jeder künftigen Änderung erneut gepflegt werden muss. Gerade in Codebasen mit häufig wechselnden Konfigurationsobjekten oder wachsenden Interfaces zahlt sich diese Investition schnell aus.

10. Zusammenfassung

keyof und typeof lösen gemeinsam ein wiederkehrendes Problem in typisierten Codebasen: Typen, die parallel zu einem bereits existierenden Wert manuell gepflegt werden, laufen früher oder später auseinander. keyof extrahiert die Schlüssel eines Objekttyps als Union und macht sie in generischen Funktionen wie getProp<T, K extends keyof T> nutzbar. typeof liest zur Kompilierzeit den Typ eines konkreten Wertes aus und unterscheidet sich fundamental vom gleichnamigen Laufzeitoperator aus JavaScript, obwohl beide dasselbe Schlüsselwort teilen.

In Kombination mit as const und Indexed Access Types wie T[K] entsteht daraus ein durchgängiges Muster, um literale Union-Typen aus Arrays und Objekten, typsichere Property-Zugriffe und synchron gehaltene Konfigurationstypen zu erzeugen, ganz ohne doppelte Typdeklarationen. Wer diese Operatoren konsequent einsetzt, reduziert nicht nur den Wartungsaufwand für Typdefinitionen, sondern lässt den Compiler echte Tippfehler bei Property-Namen und Konfigurationswerten zuverlässig abfangen, bevor sie überhaupt in Produktion gelangen.

11. FAQ: keyof und typeof in TypeScript