typeof und keyof kombinieren
Leiten Sie durch das Verketten von Typoperatoren präzise Typen ab.
typeof und keyof kombinieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Die starke Kombination
Einzeln leitet typeof einen Typ aus einem Wert ab, während keyof die Schlüssel eines Typs auflistet. Zusammen — keyof typeof value — erzeugen sie eine Union der tatsächlichen Schlüssel eines Werts und ermöglichen vollständig typsicheren Zugriff.
keyof typeof in der Praxis
Beginnen Sie mit einem Const-Objekt, erfassen Sie dessen Typ mit typeof und listen Sie anschließend seine Schlüssel mit keyof auf. Das Ergebnis ist eine Union der literalen Schlüsselnamen des Objekts.
const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])Warum dieses Muster existiert
Oft haben Sie ein Laufzeitobjekt, aber kein separates Interface. keyof typeof liefert Ihnen einen Schlüsseltyp, ohne die Struktur des Objekts als handgeschriebenen Typ zu duplizieren.
const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2Typsicherer Zugriff per Schlüssel
Ein als keyof typeof obj typisierter Funktionsparameter weist ungültige Schlüssel bereits zur Compile-Zeit zurück, sodass der Indexed Access im Funktionskörper garantiert sicher ist.
const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a keyEnum-ähnliche Konstantenobjekte
Ein gängiges Idiom: Definieren Sie ein as const-Objekt als Pseudo-Enum und leiten Sie daraus sowohl die Schlüssel- als auch die Werttypen ab.
const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)Schlüssel vs. Werte
Beachten Sie den Unterschied: keyof typeof obj liefert die Schlüsselnamen, während typeof obj[keyof typeof obj] die Werttypen liefert. Wählen Sie je nach Bedarf Ihrer API den passenden Typ.
const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)Generisches getProperty
Der klassische typsichere Getter schränkt einen Schlüsselparameter mit K extends keyof T ein und gibt T[K] zurück, sodass der Ergebnistyp genau dem Typ der abgerufenen Eigenschaft entspricht.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const user = { id: 1, name: "Ada" }
const name = getProperty(user, "name") // string
console.log(name)Der Rückgabetyp folgt dem Schlüssel
Da der Rückgabewert T[K] ist, passt sich sein Typ bei jedem Aufruf an den konkret übergebenen Schlüssel an — für einen Schlüssel eine Zahl, für einen anderen eine Zeichenkette.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1, name: "Ada" }
const id = getProperty(u, "id") // number
const nm = getProperty(u, "name") // string
console.log(id, nm)Ungültige Schlüssel werden abgelehnt
Die Übergabe eines Schlüssels, der im Objekt nicht existiert, führt zu einem Compile-Fehler. Die generische Einschränkung stellt dies sicher, bevor der Code überhaupt ausgeführt wird.
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))Ein typsicherer Setter
Mit derselben Technik lässt sich ein Setter erstellen: Der Wertparameter ist T[K], sodass Sie für den jeweiligen Schlüssel nur einen Wert des richtigen Typs zuweisen können.
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)Alles zusammenführen
Das Muster keyof typeof in Kombination mit generischem T[K]-Zugriff liefert sichere, wiederverwendbare Hilfsfunktionen für echte Objekte — die Grundlage typisierter Konfigurationsleser, Nachschlagefunktionen und Formularhelfer.
const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
return theme[name]
}
console.log(color("danger")) // #f00Kurzer Check
Testen Sie Ihr Verständnis der Kombination aus typeof und keyof.
Zusammenfassung
keyof typeof value leitet eine Union der tatsächlichen Schlüssel eines Werts ab, ohne dass Sie ein separates Interface schreiben müssen, und macht Indexed Access dadurch typsicher. Unterscheiden Sie Schlüsseltypen (keyof typeof obj) von Werttypen (typeof obj[keyof typeof obj]). Das generische Muster getProperty<T, K extends keyof T>(obj, key): T[K] liefert den exakten abgerufenen Typ und weist ungültige Schlüssel bereits zur Compile-Zeit zurück.
Lerne TypeScript mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 101
- Lektionen
- 352
Häufig gestellte Fragen
Ist die Lektion „typeof und keyof kombinieren“ kostenlos?
Ja — der vollständige Text von „typeof und keyof kombinieren“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „typeof und keyof kombinieren“?
Leiten Sie durch das Verketten von Typoperatoren präzise Typen ab. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.
Wie lange dauert die Lektion „typeof und keyof kombinieren“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Der typeof-Typoperator
- Der keyof-Typoperator
- Indexzugriffstypen
- typeof und keyof kombinieren