TypeScript Enum für Radio-Buttons durchlaufen: Anleitung

Warum Enum und Radio-Buttons ein perfektes Team sind

Stell Dir vor: Du entwickelst ein Formular in TypeScript. Der Benutzer soll eine Option aus mehreren auswählen – zum Beispiel den Schwierigkeitsgrad, den Bestellstatus oder das Geschlecht. Wo speicherst Du diese Optionen? Ein hartcodiertes Array von Strings ist keine gute Lösung. Bei vielen Optionen wird es unübersichtlich, und wenn sich die Geschäftslogik ändert, musst Du den Code an zehn Stellen anpassen.

Hier kommen Enums (Aufzählungen) ins Spiel. Sie definieren einen Satz benannter Konstanten, die sowohl für Menschen lesbar als auch maschinenverständlich sind. Radio-Buttons sind das klassische UI-Element zur Auswahl eines einzelnen Werts aus einer Liste. Beides zu kombinieren bedeutet sauberen, wartbaren Code. Klingt gut, aber es gibt einen Haken: Wie genau durchläuft man ein Enum, um es in der Vorlage anzuzeigen? Diese Frage beschäftigt unzählige Entwickler auf Stack Overflow. Lass uns das ein für alle Mal klären.

Das Problem: Ein Enum ist kein Array

In TypeScript ist ein Enum nicht einfach eine Liste von Strings. Je nachdem, ob Du es als numerisches oder String-Enum deklarierst, verhält es sich unterschiedlich. Ein numerisches Enum erzeugt eine Rückwärtszuordnung: Schlüssel -> Wert und Wert -> Schlüssel. Ein String-Enum hingegen nur die Vorwärtszuordnung. Daher ist es keine gute Idee, einfach for (let item in MyEnum) zu schreiben. Du erhältst nicht nur die gewünschten Schlüssel, sondern auch die unnötigen Rückwärtszuordnungen.

So sieht eine typische Falle aus:

enum Status {\n  Active = 1,\n  Inactive = 2,\n  Pending = 3\n}\n\n// So NICHT machen\nfor (let key in Status) {\n  console.log(key); // "1", "2", "3", "Active", "Inactive", "Pending"\n}\n

Siehst Du? In der Konsole landen sowohl Namen als auch Werte. Wenn Du das in Radio-Buttons ausgibst, sieht der Benutzer kryptische Zahlen. Das wollen wir nicht.

Lösung Nr. 1: Object.values() für String-Enums

Der einfachste und zuverlässigste Weg ist die Verwendung von Object.values(). Diese Methode gibt ein Array der aufzählbaren Eigenschaftswerte eines Objekts zurück. Für String-Enums funktioniert das perfekt, da sie (fast immer) keine Rückwärtszuordnung haben.

Beispiel: Bestellstatus

enum OrderStatus {\n  New = 'new',\n  Processing = 'processing',\n  Shipped = 'shipped',\n  Delivered = 'delivered',\n  Cancelled = 'cancelled'\n}\n\n// Array der Werte abrufen\nconst statusValues = Object.values(OrderStatus);\n// ['new', 'processing', 'shipped', 'delivered', 'cancelled']\n\n// Jetzt einfach in der Vorlage anzeigen (React)\nfunction StatusSelector() {\n  return (\n    <div>\n      {statusValues.map((status) => (\n        <label key={status}>\n          <input type="radio" name="status" value={status} />\n          {status}\n        </label>\n      ))}\n    </div>\n  );\n}\n

Genial einfach. Wir haben ein Array von Strings und durchlaufen es. Funktioniert mit React, Angular, Vue – jedem Framework.

Lösung Nr. 2: Object.keys() + Filterung für numerische Enums

Bei numerischen Enums ist die Situation kniffliger. Object.values() gibt nicht nur die String-Schlüssel zurück, sondern auch die numerischen Werte, da JavaScript sie als „Eigenschaften“ des Objekts betrachtet. Wir müssen nur die Strings (Schlüssel) herausfiltern.

Beispiel: Zugriffslevel

enum AccessLevel {\n  Guest = 0,\n  User = 1,\n  Moderator = 2,\n  Admin = 3\n}\n\n// Filtern: nur Strings (Schlüssel) behalten\nconst levelKeys = Object.keys(AccessLevel).filter(key => isNaN(Number(key)));\n// ['Guest', 'User', 'Moderator', 'Admin']\n\n// Für eine benutzerfreundliche Anzeige als Objekt-Array\nconst levelOptions = levelKeys.map(key => ({\n  label: key,\n  value: AccessLevel[key as keyof typeof AccessLevel]\n}));\n// [\n//   { label: 'Guest', value: 0 },\n//   { label: 'User', value: 1 },\n//   ...\n// ]\n

Jetzt hast Du ein Array von Optionen, bei dem label der lesbare Name und value der numerische Code ist – perfekt für die Verarbeitung im Backend.