valueof in TypeScript: So erhalten Sie den Werttyp aus einem Objekt

Online Python-Trainer für Anfänger

Lernen Sie Python einfach ohne theoretische Überlastung. Lösen Sie praktische Aufgaben mit automatischer Überprüfung und schreiben Sie Code direkt im Browser.

Kurs starten

Gibt es ein `valueof` ähnlich wie `keyof` in TypeScript? Optimierung und Leistung

\n\n

Haben Sie jemals in TypeScript geschrieben und sich gedacht: „Ich habe keyof für Schlüssel, aber wo ist valueof für Werte?“ Falls ja – Sie sind nicht allein. Diese Frage auf Stack Overflow hat tausende Aufrufe, und heute werden wir sie von Grund auf durchgehen. Aber nicht nur als abstrakte Theorie, sondern mit Fokus auf Optimierung und Leistung Ihres Codes. Los geht's!

\n\n

Warum gibt es `keyof`, aber kein `valueof`?

\n\n

In TypeScript gibt es den integrierten Hilfstyp keyof. Er nimmt einen Objekttyp und gibt die Vereinigung aller seiner Schlüssel zurück:

\n\n
type Person = {\n  name: string;\n  age: number;\n  isActive: boolean;\n};\n\ntype PersonKeys = keyof Person; // "name" | "age" | "isActive"
\n\n

Und was ist mit Werten? Man möchte string | number | boolean aus demselben Typ erhalten. In der Standardbibliothek von TypeScript gibt es das nicht. Warum? Weil valueof nicht einfach eine „umgekehrte Operation“ ist. Ein Objekt kann viele Schlüssel mit denselben Typen haben, und wir müssen entscheiden, wie wir diese zusammenführen. Aber das bedeutet nicht, dass wir unser eigenes valueof nicht schreiben können!

\n\n

Erstellen unseres eigenen `ValueOf`

\n\n

Der einfachste Weg ist die Verwendung eines Indexzugriffstyps (indexed access type) in Kombination mit keyof:

\n\n
type ValueOf<T> = T[keyof T];\n\ntype PersonValues = ValueOf<Person>; // string | number | boolean
\n\n

Das war's! Wir haben gerade einen generischen Typ ValueOf erstellt, der wie valueof funktioniert. Aber lassen Sie uns tiefer graben – wie wirkt sich das auf die Leistung aus und wie verwendet man es klug?

\n\n

Optimierung: Wenn `ValueOf` vor Duplizierung schützt

\n\n

Stellen Sie sich vor, Sie haben ein Konfigurationsobjekt mit Dutzenden von Feldern. Sie möchten eine Funktion schreiben, die jeden beliebigen Wert aus diesem Objekt akzeptiert. Ohne ValueOf müssten Sie die Typen manuell auflisten:

\n\n
type Config = {\n  apiUrl: string;\n  timeout: number;\n  retries: number;\n  debug: boolean;\n};\n\n// Schlecht: Typen-Duplizierung\nfunction setConfigValue(key: string, value: string | number | boolean) {\n  // ...\n}
\n\n

Und jetzt mit ValueOf:

\n\n
// Gut: übernimmt automatisch alle Werttypen\nfunction setConfigValue(key: keyof Config, value: ValueOf<Config>) {\n  // TypeScript weiß, dass value nur string | number | boolean sein kann\n}
\n\n

Das verkürzt nicht nur den Code, sondern macht ihn auch selbstdokumentierend. Wenn Sie ein neues Feld zu Config hinzufügen, übernimmt TypeScript den neuen Typ automatisch. Weniger Fehler – mehr Entwicklungsleistung.

\n\n

Fortgeschrittener `ValueOf` mit Bedingten Typen

\n\n

Manchmal müssen Sie nur die Werte bestimmter Schlüssel erhalten. Zum Beispiel alle numerischen Werte. Hier kommen bedingte Typen (conditional types) ins Spiel:

\n\n
type NumericValues<T> = {\n  [K in keyof T]: T[K] extends number ? T[K] : never;\n}[keyof T];\n\ntype ConfigNumeric = NumericValues<Config>; // number (timeout | retries)
\n\n

Diese Technik ist besonders nützlich bei der Arbeit mit großen Typen: Sie können nur die benötigten Werte herausfiltern und unnötige Laufzeitprüfungen vermeiden. Optimierung auf Typebene ist kostenlose Leistung, da Typen beim Kompilieren verschwinden.

\n\n

Laufzeitleistung: Ist das nötig?

\n\n

Ein wichtiger Punkt: ValueOf ist eine reine Typkonstruktion. Sie erzeugt keinen JavaScript-Code. Aber ihre korrekte Verwendung kann die Leistung Ihrer Anwendung indirekt verbessern:

\n\n
    \n
  • Weniger Fehler – weniger Zeit für das Debugging.
  • \n
  • Striktere Typisierung – der Compiler fängt

Blogs

Buchempfehlungen