Magento 2 Experten — Hyvä Theme, Tailwind CSS & SEO aus einer Hand ›

Literal Types und Enums in TypeScript

Literal Types und Enums

~14 Min. Lesezeit Zuletzt aktualisiert am 8. August 2026

BuchStatus = 'verfuegbar' | 'ausgeliehen' | 'reserviert' aus Kapitel 8/9 ist eine Union aus Literal Types – dieses Kapitel vertieft dieses Konzept und stellt die ALTERNATIVE dazu vor: enum.

Literal Types: mehr als nur Strings

type Wuerfelwurf = 1 | 2 | 3 | 4 | 5 | 6; // numerische Literal Types
type JaNein = true | false;              // GENAU dasselbe wie 'boolean'

let wurf: Wuerfelwurf = 4;  // ✓
wurf = 7;                   // ✗ Fehler - 7 ist NICHT Teil der erlaubten Werte

Literal Types funktionieren für JEDEN primitiven Typ, nicht nur string – numerische Literal-Unions sind z. B. nützlich für feste Wertebereiche wie Würfelaugen oder Bewertungssterne (1-5).

Enums: die klassische Alternative

enum Genre {
  Fantasy,
  Krimi,
  SachBuch,
  Biografie,
}

let lieblingsgenre: Genre = Genre.Fantasy;
console.log(lieblingsgenre); // 0 - Enums sind standardmäßig NUMERISCH, beginnend bei 0

enum ist eine EIGENE Sprachkonstruktion (kein reiner Typ wie type/interface) – sie existiert AUCH zur Laufzeit als echtes JavaScript-Objekt, nicht nur zur Kompilierzeit. Standardmäßig bekommt jeder Wert automatisch eine fortlaufende Zahl (0, 1, 2, ...).

String-Enums: lesbarere Werte

enum Genre {
  Fantasy = 'FANTASY',
  Krimi = 'KRIMI',
  SachBuch = 'SACHBUCH',
  Biografie = 'BIOGRAFIE',
}

console.log(Genre.Fantasy); // 'FANTASY' - lesbar in Logs/Debugging, anders als numerisch 0

Achtung: Numerische Enums haben eine überraschende Eigenschaft: die Zahlen 0, 1, 2, ... werden intern AUCH umgekehrt zugeordnet (Genre[0] ergibt 'Fantasy') – bei String-Enums gibt es diese "Reverse Mapping" NICHT. Für Debugging und beim Serialisieren (z. B. in JSON, wo eine Zahl 0 wenig aussagt) sind String-Enums fast immer die bessere Wahl.

Wann enum, wann Literal-Union?

WerkzeugEigenschaften
Literal Union (type X = 'a' | 'b')Existiert NUR zur Kompilierzeit (kein Laufzeit-Objekt, kein zusätzlicher JavaScript-Code). Werte sind einfache Strings – funktioniert nahtlos mit JSON, APIs, Datenbanken.
enumExistiert AUCH zur Laufzeit als echtes Objekt – erlaubt Object.values(Genre) zur Laufzeit-Iteration über alle Werte. Erzeugt zusätzlichen kompilierten JavaScript-Code.

Die moderne TypeScript-Community tendiert klar zu Literal-Unions für die MEISTEN Anwendungsfälle (siehe TypeScripts eigene Team-Empfehlung) – enum bleibt sinnvoll, wenn Sie tatsächlich zur LAUFZEIT über alle möglichen Werte iterieren müssen.

Praxis: Genre als Literal-Union statt freiem String

Unser bisheriges genres: string[] erlaubt JEDEN beliebigen String – ein Tippfehler wie 'Fantsy' würde nicht auffallen. Wir schränken es ein:

src/models/Genre.ts
export type Genre =
  | 'Fantasy'
  | 'Krimi'
  | 'SachBuch'
  | 'Biografie'
  | 'Roman'
  | 'Kinderbuch';
// In Buch.ts:
import { Genre } from './Genre.js';

export interface Buch {
  // ... bisherige Felder
  genres: Genre[]; // statt string[]
}

// Jetzt wird ein Tippfehler SOFORT erkannt:
genres: ['Fantsy']; // Fehler - 'Fantsy' ist kein gültiger Genre-Wert

Tipp: Faustregel dieses Tutorials: bevorzugen Sie Literal-Unions für feste Wertemengen, es sei denn, Sie brauchen ECHTE Laufzeit-Iteration über alle Werte (dann enum) oder arbeiten in einer bestehenden Codebase, die bereits konsequent enum nutzt (dann KONSISTENZ vor persönlicher Präferenz, wie schon in Kapitel 8 betont).