Record in TypeScript: Was es ist und wie ein Anfänger es nutzt

Record in TypeScript: Praxisnahe Erklärung

Stellen Sie sich vor, Sie schreiben eine App zum Englischlernen. Sie müssen Übersetzungen speichern: cat → Katze, dog → Hund. Wie typisiert man das richtig in TypeScript? Man könnte ein Interface erstellen, aber was, wenn die Schlüssel nicht im Voraus bekannt sind? Oder es gibt zu viele? Hier kommt Record ins Spiel – einer der nützlichsten, aber oft unterschätzten Hilfstypen.

In diesem Artikel erklären wir anhand realer Beispiele, was der Record-Typ in TypeScript ist – direkt anwendbar in Ihren eigenen Projekten. Keine langweilige Theorie, nur Praxis.

Was ist Record in TypeScript? Einfach erklärt

Record<K, V> ist ein eingebauter Hilfstyp, der ein Objekt erstellt, bei dem alle Schlüssel den Typ K und alle Werte den Typ V haben.
Stellen Sie es sich als typisiertes Wörterbuch oder Map mit einer festgelegten Menge von Schlüsseln vor.

Die grundlegende Schreibweise sieht so aus:

// Ein normales Objekt\nconst userRoles: Record<string, string> = {\n  admin: 'Administrator',\n  user: 'Benutzer',\n  guest: 'Gast'\n};

Hier bedeutet Record<string, string>: „Ein Objekt, bei dem die Schlüssel Strings und die Werte ebenfalls Strings sind“. Einfach und verständlich.

Warum ist Record besser als ein normales Interface?

\n
• Flexibilität der Schlüssel: Sie können einen bestimmten Satz von Schlüsseln über einen Union-Typ festlegen.
\n
• Kompaktheit: Sie müssen nicht jedes Feld manuell beschreiben.
\n
• Sicherheit: TypeScript prüft, dass Sie nur erlaubte Schlüssel verwenden.
\n

Record vs. einfaches Objekt: Ein anschauliches Beispiel

Angenommen, wir haben Bestellstatus: pending, shipped, delivered. Ohne Record müssten wir ein Interface mit drei Feldern schreiben:

interface OrderStatusMap {\n  pending: string;\n  shipped: string;\n  delivered: string;\n}\n\nconst statusDescriptions: OrderStatusMap = {\n  pending: 'Wartet auf Bearbeitung',\n  shipped: 'Versendet',\n  delivered: 'Geliefert'\n};

Mit Record ist es kompakter und übersichtlicher:

type OrderStatus = 'pending' | 'shipped' | 'delivered';\n\nconst statusDescriptions: Record<OrderStatus, string> = {\n  pending: 'Wartet auf Bearbeitung',\n  shipped: 'Versendet',\n  delivered: 'Geliefert'\n};

Vorteil: Wenn Sie versuchen, cancelled zum Objekt hinzuzufügen, zeigt TypeScript sofort einen Fehler an – diesen Status gibt es nicht im Union-Typ.

Top 5 praktische Anwendungsbeispiele für Record

Schauen wir uns an, wo Record das Leben wirklich vereinfacht.

1. App-Konfiguration

Speichern Sie Einstellungen mit bekannten Schlüsseln, aber unterschiedlichen Wertetypen:

type ConfigKeys = 'apiUrl' | 'timeout' | 'retryCount';\ntype ConfigValue = string | number | boolean;\n\nconst appConfig: Record<ConfigKeys, ConfigValue> = {\n  apiUrl: 'https://api.example.com',\n  timeout: 5000,\n  retryCount: 3\n};

2. Mapping von Enums oder Konstanten

Häufig muss man einen Code und seine lesbare Bezeichnung zuordnen:

enum HttpStatus {\n  OK = 200,\n  NotFound = 404,\n  Error = 500\n}\n\nconst statusMessages: Record<HttpStatus, string> = {\n  [HttpStatus.OK]: 'Alles gut',\n  [HttpStatus.NotFound]: 'Nicht gefunden',\n  [HttpStatus.Error]: 'Serverfehler'\n};

3. Formulare und Validierung

Record eignet sich hervorragend zum Speichern von Validierungsfehlern pro Feld:

type FormFields = 'email' | 'password' | 'name';\ntype ValidationErrors = Record<FormFields, string | null>;\n\nconst errors: ValidationErrors = {\n  email: 'Ungültige E-Mail',\n  password: null,\n  name: 'Name ist erforderlich'\n};

4. Daten-Cache

Simulation eines Caches mit ID-Schlüsseln:

type UserI