TypeScript Academy · Lektion

Der keyof-Typoperator

Ermitteln Sie mit keyof eine Union aus den Schlüsseln eines Objekttyps.

Der keyof-Typoperator ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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 Schlüssel eines Typs

Der Operator keyof nimmt einen Objekttyp und erzeugt eine Union seiner Eigenschaftsschlüssel. Er bildet die Grundlage für typsicheren Eigenschaftszugriff und generische Schlüssel-Hilfsfunktionen.

Grundlagen von keyof

Wenden Sie keyof auf ein Interface an, um eine Union seiner Schlüsselnamen als Stringliteraltypen zu erhalten.

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

Nur gültige Schlüssel sind erlaubt

Eine Variable mit dem Typ keyof T kann nur einen der tatsächlich in T vorhandenen Schlüssel enthalten. Tippfehler und ungültige Schlüssel werden zur Compilezeit erkannt.

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

keyof mit typeof

Kombinieren Sie keyof mit typeof, um die Schlüssel des abgeleiteten Typs eines Werts zu erhalten. Hier ermitteln wir die Schlüssel eines Konfigurationsobjekts, ohne ein Interface zu schreiben.

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

keyof einer String-Indexsignatur

Bei einem Typ mit einer String-Indexsignatur ist keyof gleich string | number – denn jeder String-Schlüssel ist erlaubt und numerische Schlüssel werden in Strings umgewandelt.

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

keyof einer Number-Indexsignatur

Bei einer Number-Indexsignatur ist keyof einfach number. Das entspricht der Art, wie Arrays numerische Indizes bereitstellen.

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

keyof eines Arraytyps

Die Anwendung von keyof auf einen Arraytyp ergibt eine überraschende Union: numerische Indizes sowie alle Namen von Arraymethoden und -eigenschaften wie length und push.

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

Schlüssel sicher durchlaufen

Verwenden Sie keyof, um Schleifen zu schreiben, die nur auf gültige Schlüssel zugreifen. Die Umwandlung von Object.keys in (keyof T)[] hält den indizierten Zugriff typsicher.

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

keyof in generischen Constraints

Ein generischer Schlüsselparameter wird normalerweise mit K extends keyof T eingeschränkt. Dadurch wird garantiert, dass der Schlüssel tatsächlich im Objekt vorhanden ist.

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const name = pluck({ id: 1, name: "Ada" }, "name")
console.log(name) // Ada

Mehrere Schlüssel kombinieren

Da keyof T eine Union ist, können Sie sie schneiden oder filtern. Hier akzeptiert eine Funktion ein Array gültiger Schlüssel.

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

Warum keyof wichtig ist

keyof macht aus Eigenschaftsnamen einen überprüfbaren Typ. Dadurch lassen sich generische Getter, Setter und Mapper erstellen, die nicht auf einen nicht vorhandenen Schlüssel verweisen können. In fortgeschrittenem TypeScript ist es überall zu finden.

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

Schnelltest

Testen Sie Ihr Verständnis des Operators keyof.

Zusammenfassung

keyof T erzeugt eine Union der Eigenschaftsschlüssel von T als Literaltypen und beschränkt Variablen auf gültige Schlüssel. Bei String-Indexsignaturen ergibt sich string | number, bei Number-Indexsignaturen number. In Kombination mit typeof werden Schlüssel aus Werten abgeleitet; zusammen mit Generics (K extends keyof T) ermöglicht keyof typsichere Getter, Auswah lfunktionen und Iteration.

Häufig gestellte Fragen

Ist die Lektion „Der keyof-Typoperator“ kostenlos?

Ja — der vollständige Text von „Der keyof-Typoperator“ 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 „Der keyof-Typoperator“?

Ermitteln Sie mit keyof eine Union aus den Schlüsseln eines Objekttyps. 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 2 von 4.

Wie lange dauert die Lektion „Der keyof-Typoperator“?

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

← Zurück zu TypeScript Academy