Enums und const-Assertions: die modernen Alternativen

Verstehe die Grenzen von Enums und leite deine Typen aus mit as const eingefrorenen Konstanten ab.

7 Min. · 3 Fragen

enum gehört seit den Anfängen zur Sprache, und du wirst ihm in vielen Codebasen begegnen. Es gruppiert benannte Konstanten unter einem einzigen Typ, der sowohl als Wert als auch als Annotation nutzbar ist.

enum Role {
  User = "USER",
  Admin = "ADMIN",
}

function canDelete(role: Role): boolean {
  return role === Role.Admin;
}

Trotzdem wendet sich das moderne Ökosystem davon ab. Ein enum ist Syntax, die es in JavaScript nicht gibt: Der Compiler erzeugt zur Laufzeit ein Objekt, was manche Werkzeuge erschwert und mit der Option erasableSyntaxOnly unvereinbar ist. Die Alternative: ein schlichtes Objekt, mit as const eingefroren, aus dem du den Typ ableitest.

const ROLES = {
  User: "USER",
  Admin: "ADMIN",
} as const;

type Role = (typeof ROLES)[keyof typeof ROLES];

function canDelete(role: Role): boolean {
  return role === ROLES.Admin;
}

as const funktioniert auch bei Arrays: Jedes Element wird zu einem schreibgeschützten Literal, und (typeof SIZES)[number] erzeugt die Union der Werte. Eine einzige Quelle der Wahrheit speist sowohl den laufenden Code als auch die Typen.

const SIZES = ["sm", "md", "lg"] as const;

type Size = (typeof SIZES)[number];

function isSize(value: string): value is Size {
  return (SIZES as readonly string[]).includes(value);
}

Wissenscheck

Stelle sicher, dass du die wichtigsten Punkte dieser Lektion behalten hast.

1. Welcher wesentliche Unterschied trennt ein enum von einem mit as const eingefrorenen Objekt?
   • Ein enum ist TypeScript-spezifische Syntax, die Code erzeugt, während ein as const-Objekt schlichtes JavaScript bleibt
   • Ein as const-Objekt ist zur Laufzeit langsamer
   • Ein enum kann nur Zahlen enthalten
2. Was erzeugt as const, angewendet auf das Array ['sm', 'md']?
   • string[]
   • Ein schreibgeschütztes Tupel aus Literaltypen
   • Ein veränderbares Array vom Typ Array<'sm' | 'md'>
   • Einen Kompilierfehler
3. Wie erhältst du die Union der Werte eines mit as const eingefrorenen ROLES-Objekts?
   • keyof typeof ROLES
   • (typeof ROLES)[keyof typeof ROLES]
   • typeof ROLES