TypeScript: Warum Maps gegenüber Enums bevorzugen?

enum in TypeScript mag eine natürliche Wahl erscheinen, um eine feste Menge von Werten darzustellen. Allerdings haben sie wichtige Einschränkungen, die die Wartbarkeit und Performance Ihres Codes beeinflussen können. Schauen wir uns an, warum Map oft die bessere Alternative ist.

Das Problem mit Enums

Enums haben mehrere wesentliche Nachteile, die bei der Entwicklung komplexer Anwendungen deutlich werden:

1. Starrheit: Keine dynamische Änderung möglich
2. Performance: Generierung von umfangreichem JavaScript-Code
3. Komplexes Typing: Schwierigkeiten bei Introspektion und Type-Unions
4. Bundle-Größe: Auswirkungen auf die finale Codegröße

Ein konkretes Beispiel:

typescript
1// TypeScript-Code
2enum Status {
3  Active = 'ACTIVE',
4  Inactive = 'INACTIVE',
5}
6
7// Transpilierter JavaScript-Code
8var Status = {
9  Active: 'ACTIVE',
10  Inactive: 'INACTIVE',
11  ACTIVE: 'Active',
12  INACTIVE: 'Inactive',
13};
14(function (Status) {
15  Status['Active'] = 'ACTIVE';
16  Status['Inactive'] = 'INACTIVE';
17})(Status || (Status = {}));

Dieser transpilierte Code erzeugt:

• Ein Objekt mit Spiegeleigenschaften (Schlüssel ↔ Wert)
• Eine überflüssige IIFE (Immediately Invoked Function Expression)
• Doppelte Referenzen für jeden Wert
• Zusätzlichen Code, der die Performance beeinträchtigt

Die Lösung mit Maps

Map und TypeScript-Objekte bieten einen eleganteren und flexibleren Ansatz:

typescript
1// Lösung mit const und Types
2const Status = {
3  Active: 'ACTIVE',
4  Inactive: 'INACTIVE',
5} as const;
6
7// Automatisch abgeleiteter Typ
8type Status = (typeof Status)[keyof typeof Status];
9
10// Einfacher und effizienter transpilierter Code
11const Status = {
12  Active: 'ACTIVE',
13  Inactive: 'INACTIVE',
14};

Vorteile von Maps

1. Type-Safety

typescript
1function processStatus(status: Status) {
2  // Compilerfehler bei ungültigem Status
3  console.log(status);
4}
5
6// Laufzeit-Validierung
7const isValidStatus = (status: string): status is Status =>
8  Object.values(Status).includes(status as Status);

2. Erweiterbarkeit

typescript
1// Dynamische Erweiterung möglich
2const ExtendedStatus = {
3  ...Status,
4  Pending: 'PENDING' as const,
5};

3. Fortgeschrittene Patterns

typescript
1// Zugehörige Konfiguration
2const StatusConfig = {
3  [Status.Active]: {
4    color: 'green',
5    label: 'Aktiv',
6    icon: 'check',
7  },
8  [Status.Inactive]: {
9    color: 'red',
10    label: 'Inaktiv',
11    icon: 'cross',
12  },
13} as const;
14
15// Utility-Typ
16type StatusConfig = {
17  [K in Status]: {
18    color: string;
19    label: string;
20    icon: string;
21  };
22};
23
24// Typisierte Helper-Funktion
25function getStatusConfig(status: Status) {
26  return StatusConfig[status];
27}

Praktische Anwendungsfälle

1. API-Endpunkte

typescript
1const ApiEndpoints = {
2  Users: '/api/users',
3  Products: '/api/products',
4  Orders: '/api/orders',
5} as const;
6
7type Endpoint = (typeof ApiEndpoints)[keyof typeof ApiEndpoints];
8
9// Automatisches URL-Typing
10function fetchData(endpoint: Endpoint) {
11  return fetch(endpoint);
12}

2. Zustandsverwaltung

typescript
1const LoadingState = {
2  Idle: 'IDLE',
3  Loading: 'LOADING',
4  Success: 'SUCCESS',
5  Error: 'ERROR',
6} as const;
7
8type LoadingState = typeof LoadingState[keyof typeof LoadingState];
9
10function handleState(state: LoadingState) {
11  switch (state) {
12    case LoadingState.Loading:
13      return <Spinner />;
14    case LoadingState.Error:
15      return <ErrorMessage />;
16    // TypeScript prüft Vollständigkeit
17  }
18}

Detaillierte Vergleichstabelle

Ein detaillierter Vergleich zwischen Enums und Maps:

Type-Safety

• Enum: Grundlegend (✓)
• Map: Fortgeschritten mit Typinferenz (✓✓)

Laufzeit-Performance

• Enum: Weniger performant (✗)
• Map: Performanter (✓)

Bundle-Größe

• Enum: Größer (✗)
• Map: Kleiner (✓)

Erweiterbarkeit

• Enum: Schwer erweiterbar (✗)
• Map: Leicht erweiterbar (✓)

Introspektion

• Enum: Eingeschränkte Möglichkeiten
• Map: Volle Möglichkeiten

TypeScript-Strict-Kompatibilität

• Enum: Kompatibel (✓)
• Map: Voll kompatibel mit mehr Funktionen (✓✓)

Wartung

• Enum: Komplexer zu warten
• Map: Einfacher zu warten

Best Practices

1. Aussagekräftige Benennung

typescript
1// Bevorzugt
2const HttpStatus = {
3  Ok: 200,
4  NotFound: 404,
5  ServerError: 500,
6} as const;
7
8// Zu vermeiden
9const Status = {
10  a: 200,
11  b: 404,
12  c: 500,
13} as const;

2. Union Types

typescript
1// Erstellung type-sicherer Unions
2type HttpSuccessStatus = 200 | 201 | 204;
3type HttpErrorStatus = 400 | 401 | 404 | 500;
4type HttpStatus = HttpSuccessStatus | HttpErrorStatus;

3. Laufzeit-Validierung

typescript
1function isHttpSuccess(status: number): status is HttpSuccessStatus {
2  return [200, 201, 204].includes(status);
3}

Fazit

Maps bieten eine robustere Alternative zu Enums mit:

• Präziserem und flexiblerem Typing
• Besserer Laufzeit-Performance
• Vereinfachter Wartung
• Besserer Kompatibilität mit dem JavaScript-Ökosystem

Zur Vertiefung dieser Konzepte, siehe:

• TypeScript-Dokumentation
• TypeScript-Handbuch
• TypeScript Deep Dive

Teilen Sie gerne Ihre Erfahrungen als Beitrag zu diesem Artikel!