Wörterbücher in TypeScript: Deklaration und Initialisierung von Grund auf

Wörterbücher in TypeScript: Vom Chaos zur Ordnung (vollständige Anleitung mit Code)

Stellen Sie sich vor, Sie schreiben eine App zum Englischlernen. Sie müssen Wortübersetzungen speichern: "cat" → "Katze", "dog" → "Hund". Wie organisieren Sie diese Daten am besten? Natürlich mit einem Wörterbuch (Dictionary) – einer Datenstruktur, bei der jeder Schlüssel eindeutig ist und mit einem Wert verknüpft wird.

In JavaScript werden Wörterbücher über normale Objekte oder Map implementiert. Aber TypeScript fügt eine leistungsstarke Typisierung hinzu und verwandelt chaotische Sammlungen in strenge, vorhersagbare Strukturen. In diesem Artikel behandeln wir die Deklaration und Initialisierung von Dictionary in TypeScript vom Einfachen zum Komplexen. Sie erfahren, wie Sie typische Fehler vermeiden und Code schreiben, der vorhersagbar funktioniert.

Was ist ein Dictionary in TypeScript? (Und warum es nicht nur ein Objekt ist)

In der Programmierung ist ein Dictionary (Wörterbuch) eine Sammlung von Schlüssel-Wert-Paaren. In TypeScript können Sie es auf drei grundlegende Arten erstellen:

\n
• Objekt mit Index-Signatur ({ [key: string]: T })
\n
• Record – ein Hilfstyp
\n
• Map – eine eingebaute ES6-Klasse
\n

Jeder Ansatz hat seine Vor- und Nachteile. Lassen Sie uns diese anhand realer Beispiele durchgehen.

Methode 1: Klassisches Objekt mit Index-Signatur

Die gängigste Methode, ein Wörterbuch in TypeScript zu deklarieren, ist die Verwendung einer Index-Signatur. Sie sagt dem Compiler: „Das Objekt kann beliebig viele Eigenschaften mit Schlüsseln eines bestimmten Typs haben“.

// Deklarieren des Wörterbuchtyps, bei dem der Schlüssel ein String und der Wert eine Zahl ist\ninterface DictionaryNumber {\n    [key: string]: number;\n}\n\n// Initialisierung\nconst ages: DictionaryNumber = {\n    "Anna": 25,\n    "Peter": 30,\n    "Helena": 28\n};\n\n// Hinzufügen eines neuen Elements\nages["Olga"] = 35;\n\nconsole.log(ages["Anna"]); // 25

Wichtig: TypeScript erfordert, dass alle Werte dem deklarierten Typ entsprechen. Der Versuch, einen String hinzuzufügen, führt zu einem Kompilierungsfehler:

// Fehler! Der Typ 'string' kann nicht dem Typ 'number' zugewiesen werden\nages["Olga"] = "fünfunddreißig";

Wann diesen Ansatz verwenden?

\n
• Wenn ein einfaches und schnelles Wörterbuch benötigt wird
\n
• Wenn die Schlüssel Strings oder Zahlen sind
\n
• Für kleine Sammlungen (bis zu 1000 Elemente)
\n

Methode 2: Record – elegante Syntax

TypeScript bietet den eingebauten Hilfstyp Record<K, V>. Er erstellt einen Objekttyp, bei dem alle Schlüssel vom Typ K und alle Werte vom Typ V sind.

// Deklaration und Initialisierung in einer Zeile\nconst grades: Record<string, number> = {\n    "Mathematik": 5,\n    "Physik": 4,\n    "Geschichte": 5\n};\n\n// Man kann enum für Schlüssel verwenden\nenum Subject {\n    Math = "math",\n    Physics = "physics",\n    History = "history"\n}\n\nconst gradesBySubject: Record<Subject, number> = {\n    [Subject.Math]: 5,\n    [Subject.Physics]: 4,\n    [Subject.History]: 5\n};

Vorteile von Record:

\n
• Kurze Syntax
\n
• Gute Lesbarkeit
\n
• Unterstützung von Union-Typen für Schlüssel
\n

Methode 3: Map – für fortgeschrittene Szenarien

Die Map-Klasse aus ES6 ist eine vollwertige Schlüssel-Wert-Sammlung mit zusätzlichen Funktionen. In TypeScript wird sie über Generics typisiert:

// Deklaration einer Map\nconst userRoles: Map<string, string> = new Map([\n    ["admin", "Administrator"],\n    ["user", "Benutzer"],\n    ["guest", "Gast"]\n]);\n\n// Hinzufügen\nuserRoles.set("moderator", "Moderator");\n\n// Abrufen\nconsole.log(userRoles.get("admin")); // "Administrator"\n\n// Prüfen auf Vorhandensein\nif (userRoles.has("user")) {\n    console.log("Rolle existiert");\n}\n\n// U