TypeScript: Perché preferire le Maps agli Enums?

Sebbene gli enum in TypeScript possano sembrare una scelta naturale per rappresentare un insieme fisso di valori, presentano limitazioni significative che possono influenzare la manutenibilità e le prestazioni del codice. Vediamo perché le Map sono spesso una alternativa migliore.

Il problema con gli Enums

Gli enums presentano diversi svantaggi importanti che diventano evidenti nello sviluppo di applicazioni complesse:

1. Rigidità: Non possono essere modificati dinamicamente
2. Prestazioni: Genera codice JavaScript verbose
3. Tipizzazione complessa: Difficoltà con l'introspezione e le union dei tipi
4. Dimensione del bundle: Impatto sulla dimensione finale del codice

Consideriamo questo esempio:

typescript
1// Codice TypeScript
2enum Status {
3  Active = 'ACTIVE',
4  Inactive = 'INACTIVE',
5}
6
7// Codice JavaScript transpilato
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 = {}));

Questo codice transpilato genera:

• Un oggetto con proprietà speculari (chiave ↔ valore)
• Una IIFE (Immediately Invoked Function Expression) superflua
• Riferimento doppio per ogni valore
• Codice aggiuntivo che impatta sulle prestazioni

La soluzione con le Maps

Le Map e gli oggetti TypeScript offrono un approccio più elegante e flessibile:

typescript
1// Soluzione con const e tipi
2const Status = {
3  Active: 'ACTIVE',
4  Inactive: 'INACTIVE',
5} as const;
6
7// Tipo inferito automaticamente
8type Status = (typeof Status)[keyof typeof Status];
9
10// Codice transpilato semplice ed efficiente
11const Status = {
12  Active: 'ACTIVE',
13  Inactive: 'INACTIVE',
14};

Vantaggi delle Maps

1. Type-safety

typescript
1function processStatus(status: Status) {
2  // Errore di compilazione se status non valido
3  console.log(status);
4}
5
6// Validazione runtime
7const isValidStatus = (status: string): status is Status =>
8  Object.values(Status).includes(status as Status);

2. Estensibilità

typescript
1// Aggiunta dinamica possibile
2const ExtendedStatus = {
3  ...Status,
4  Pending: 'PENDING' as const,
5};

3. Pattern avanzati

typescript
1// Configurazione associata
2const StatusConfig = {
3  [Status.Active]: {
4    color: 'green',
5    label: 'Attivo',
6    icon: 'check',
7  },
8  [Status.Inactive]: {
9    color: 'red',
10    label: 'Inattivo',
11    icon: 'cross',
12  },
13} as const;
14
15// Tipo utility
16type StatusConfig = {
17  [K in Status]: {
18    color: string;
19    label: string;
20    icon: string;
21  };
22};
23
24// Funzione helper tipizzata
25function getStatusConfig(status: Status) {
26  return StatusConfig[status];
27}

Casi d'uso pratici

1. API Endpoints

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// Tipizzazione automatica URLs
10function fetchData(endpoint: Endpoint) {
11  return fetch(endpoint);
12}

2. Gestione dello stato

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 verifica l'esaustività
17  }
18}

Tabella comparativa dettagliata

Un confronto dettagliato tra Enums e Maps:

Type-safety

• Enum: Base (✓)
• Map: Avanzata con inferenza dei tipi (✓✓)

Prestazioni runtime

• Enum: Meno performante (✗)
• Map: Più performante (✓)

Dimensione del bundle

• Enum: Maggiore (✗)
• Map: Minore (✓)

Estensibilità

• Enum: Difficile da estendere (✗)
• Map: Facilmente estensibile (✓)

Introspezione

• Enum: Capacità limitate
• Map: Capacità complete

Compatibilità TypeScript strict

• Enum: Compatibile (✓)
• Map: Totalmente compatibile con più funzionalità (✓✓)

Manutenzione

• Enum: Più complessa da mantenere
• Map: Più facile da mantenere

Best Practices

1. Naming esplicito

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

2. Union Types

typescript
1// Creazione di union type-safe
2type HttpSuccessStatus = 200 | 201 | 204;
3type HttpErrorStatus = 400 | 401 | 404 | 500;
4type HttpStatus = HttpSuccessStatus | HttpErrorStatus;

3. Validazione runtime

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

Conclusione

Le Maps offrono un'alternativa più robusta agli enums con:

• Tipizzazione più precisa e flessibile
• Migliori prestazioni runtime
• Manutenzione semplificata
• Migliore compatibilità con l'ecosistema JavaScript

Per approfondire questi concetti, consulta:

• Documentazione TypeScript
• Manuale TypeScript
• TypeScript Deep Dive

Non esitare a contribuire a questo articolo condividendo le tue esperienze!