0Pricing
TypeScript Academy · Lektion

Index-Signaturen definieren

Beschreiben Sie Objekte, deren Schlüssel im Voraus nicht bekannt sind.

Index-Signaturen definieren ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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.

Objekte mit unbekannten Schlüsseln

Manchmal kennen Sie die Eigenschaftsnamen nicht im Voraus – etwa bei einem Dictionary mit Bewertungen, einem Cache oder einer Lookup-Tabelle. Mit der Index-Signatur von TypeScript können Sie ein Objekt beschreiben, dessen Schlüssel beliebig sind, dessen Werte aber denselben Typ haben.

Grundlegende Syntax einer Index-Signatur

Eine Index-Signatur wird als { [key: string]: number } geschrieben. Sie besagt: Jeder String-Schlüssel verweist auf einen Wert vom Typ number. Der Name key ist lediglich eine Bezeichnung – Sie können ihn beliebig wählen.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice) // 10

Schlüssel dynamisch hinzufügen

Da jeder String-Schlüssel zulässig ist, können Sie zur Laufzeit ganz neue Eigenschaften zuweisen, ohne dass TypeScript einen Fehler meldet. Genau dafür ist eine Index-Signatur gedacht.

type Scores = { [name: string]: number }

const game: Scores = {}
game.charlie = 5     // allowed
game["dave"] = 9     // also allowed
console.log(game.charlie + game.dave) // 14

Auf beliebige Schlüssel zugreifen

Sie können auf jeden Schlüssel zugreifen, auch auf einen, der nie gesetzt wurde. Das Typsystem vertraut der Signatur, daher ist der Werttyp number – zur Laufzeit ist ein fehlender Schlüssel jedoch undefined. Seien Sie vorsichtig.

type Scores = { [name: string]: number }

const game: Scores = { alice: 10 }
const missing = game.zara // typed as number, but actually undefined
console.log(missing) // undefined

Alle Werte müssen kompatibel sein

Jede Eigenschaft des Objekts muss dem Werttyp der Signatur entsprechen. Sie können in einem Dictionary mit String-Werten keinen Wert vom Typ number verwenden.

type Labels = { [key: string]: string }

const ok: Labels = { id: "a1", role: "admin" }
// const bad: Labels = { id: "a1", count: 5 } // Error: 5 not a string

Index-Signaturen in Interfaces

Dieselbe Syntax funktioniert auch innerhalb eines interface. Das ist üblich, um Konfigurationsobjekte oder Antwortzuordnungen einer API zu beschreiben.

interface Dictionary {
  [word: string]: string
}

const defs: Dictionary = {
  cat: "a small animal",
  ts: "a typed superset of JavaScript",
}
console.log(defs.ts)

Werttypen können beliebig sein

Die Wertseite ist nicht auf primitive Typen beschränkt. Sie können Schlüssel auf Arrays, Objekte oder Unions abbilden – ganz nach den Anforderungen Ihrer Daten.

type Groups = { [team: string]: string[] }

const roster: Groups = {
  red: ["ana", "leo"],
  blue: ["sam"],
}
console.log(roster.red.length) // 2

Objekte mit Index-Signatur durchlaufen

Eine for...in-Schleife durchläuft jeden dynamischen Schlüssel. Innerhalb der Schleife ist der Wert entsprechend der Signatur korrekt typisiert.

type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }

for (const name in game) {
  console.log(name + ": " + game[name])
}

Die Sicherheitslücke bei undefined

Index-Signaturen verbergen die Tatsache, dass ein Zugriff fehlschlagen kann. Wenn Sie noUncheckedIndexedAccess in tsconfig aktivieren, wird bei jedem Zugriff | undefined ergänzt. Dadurch müssen Sie fehlende Schlüssel behandeln.

// with noUncheckedIndexedAccess on:
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const v = game.bob // type: number | undefined
console.log(v ?? 0)

Readonly-Index-Signaturen

Stellen Sie der Signatur readonly voran, um Schreibzugriffe über beliebige Schlüssel zu verhindern. Das Dictionary wird dadurch zu einer Struktur, auf die nur lesend zugegriffen werden kann.

type Frozen = { readonly [key: string]: number }

const rates: Frozen = { usd: 1, eur: 1.1 }
// rates.usd = 2 // Error: read-only
console.log(rates.eur)

Wann sich Index-Signaturen anbieten

Verwenden Sie eine Index-Signatur, wenn die Menge der Schlüssel offen ist und erst zur Laufzeit ermittelt wird: etwa bei Caches, nach IDs indizierten Zählern oder geparsten Query-Parametern. Bei einer festen, bekannten Menge von Schlüsseln sind explizite Eigenschaften oder Record vorzuziehen.

type Counter = { [event: string]: number }
const clicks: Counter = {}
function track(e: string) { clicks[e] = (clicks[e] ?? 0) + 1 }
track("open"); track("open")
console.log(clicks.open) // 2

Schnelltest

Testen Sie Ihr Verständnis von Index-Signaturen.

Zusammenfassung

Sie haben gelernt, dass { [key: string]: T } Objekte mit beliebigen Schlüsseln beschreibt, deren Werte alle den Typ T haben. Schlüssel können dynamisch hinzugefügt werden, jeder Wert muss der Signatur entsprechen, und der Zugriff auf fehlende Schlüssel ergibt zur Laufzeit undefined. Verwenden Sie readonly für unveränderliche Maps und aktivieren Sie noUncheckedIndexedAccess, um Zugriffe sicherer zu machen.

Häufig gestellte Fragen

Ist die Lektion „Index-Signaturen definieren“ kostenlos?

Ja — der vollständige Text von „Index-Signaturen definieren“ 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 „Index-Signaturen definieren“?

Beschreiben Sie Objekte, deren Schlüssel im Voraus nicht bekannt sind. 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 1 von 4.

Wie lange dauert die Lektion „Index-Signaturen definieren“?

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

  1. Index-Signaturen definieren
  2. String- und Number-Index-Signaturen
  3. Bekannte und dynamische Schlüssel kombinieren
  4. Index-Signaturen und Record
← Zurück zu TypeScript Academy