Antwort.

Die Operatoren keyof und typeof sind leistungsstarke Werkzeuge zur Typisierung in TypeScript. Ihre gemeinsame Nutzung ermöglicht es, Typen im Fluss zu erstellen, sichere Funktionen zu entwickeln und die Struktur von Objekten maximal flexibel auszudrücken.

Geschichte der Frage

typeof in TypeScript dient dazu, den Typ aus einer Variable abzuleiten, während keyof eine Vereinigung aller Schlüssel eines Objekts oder Typs zurückgibt. Zusammen ermöglichen sie die Arbeit mit dynamisch deklarierten Objekten und das Erstellen von miteinander verbundenen Typen.

Problem

Ohne diese Operatoren muss man beim Arbeiten mit Objekten, Enums und Zuordnungstabellen oft manuell die Schlüsselzeilen in Typen und Werten wiederholen, was zu Synchronisierungsfehlern führt und die Wartung des Codes kompliziert.

Lösung

Mit typeof erhält man den Typ aus dem Wert einer Variable, und mit keyof erstellt man den Typ der Vereinigung aller ihrer Schlüssel. Das Ergebnis ist eine Automatisierung der Typisierung.

Beispielcode:

const ERRORS = {
  NOT_FOUND: 'Not found',
  UNAUTHORIZED: 'Unauthorized',
  SERVER_ERROR: 'Server error',
};

// Durch typeof erhalten wir den Typ, und durch keyof – alle Schlüssel des Objekts

function getErrorMessage(code: keyof typeof ERRORS): string {
  return ERRORS[code];
}

Wesentliche Merkmale:

Hilft dabei, streng verknüpfte key-value-Typen ohne manuelle Aktualisierung zu erstellen.
Ermöglicht die Typisierung von Funktionen, die mit Schlüsseln von Objekten arbeiten.
Beseitigt Synchronisierungsprobleme zwischen Schlüsseln und Typen.

Trickfragen.

Können die Werte eines Objekts, die über typeof erhalten werden, automatisch Schlüssel in einem union-Typ werden?

Nein, typeof gibt den Typ der Struktur des Objekts zurück, nicht die Werte. Um eine Vereinigung von Werten zu erhalten, müssen die Typen der Werte separat abgerufen werden.

Was gibt typeof für enum zurück und was gibt keyof typeof für enum zurück?

Für enum gibt typeof den Typ des enum-Objekts zurück (mit beiden Richtungen: key-value und value-key), während keyof typeof eine Vereinigung der string-/number-Schlüssel dieses Objekts liefert. Zum Beispiel:

enum Colors { Red = 'R', Blue = 'B' }
type ColorKeys = keyof typeof Colors; // 'Red' | 'Blue'

Kann man mit keyof typeof eine type-safe Liste aller möglichen Parameter einer Funktion erhalten, die Schlüssel eines Objekts akzeptiert?

Ja, damit erstellen Sie eine Funktion, die nur zulässige Schlüssel akzeptiert. Dies verhindert Fehler beim Arbeiten mit Schlüsseln von Objekten.

const config = { mode: 'dark', lang: 'ru' };
type ConfigKeys = keyof typeof config; // 'mode' | 'lang'
function useConfig(key: ConfigKeys) {
  // ...
}

Typische Fehler und Antipatterns

Falsche Erwartung, dass keyof typeof auf Werte von Arrays anwendbar ist – für Arrays sind es Indizes, nicht Werte.
Missverständnis, dass typeof auf Typenebene arbeitet und keinen Runtime-Wert zurückgibt.
Anwendung auf einen nicht explizit deklarierten Typ, was die Typableitungen bricht.

Beispiel aus dem Leben

Negativer Fall

In einer Konstante mit API-Status werden die Typen der string-Schlüssel manuell festgelegt:

type StatusCodes = 'OK' | 'FAIL' | 'PENDING';
function isKnownStatus(code: StatusCodes) { /* ... */ }

Vorteile:

Es ist klar ersichtlich, welche Strings zulässig sind.

Nachteile:

Es müssen manuell Typen aktualisiert werden, wenn die Liste aktualisiert wird; Synchronisierungsprobleme und Fehler.

Positiver Fall

Verwendung von keyof typeof zur automatischen Unterstützung der Liste:

const STATUS = { OK: 1, FAIL: 0, PENDING: 2 };
type StatusKeys = keyof typeof STATUS;
function checkStatus(key: StatusKeys) { /* ... */ }