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:

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

Consideriamo questo esempio:

typescript

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

Vantaggi delle Maps

Type-safety

typescript

Estensibilità

typescript

Pattern avanzati

typescript

Casi d'uso pratici

1. API Endpoints

typescript

2. Gestione dello stato

typescript

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

Naming esplicito

typescript

Union Types

typescript

Validazione runtime

typescript

Migrazione progressiva: Per migrare codice esistente che usa enums: 1. Identificare gli enums più problematici 2. Creare Maps equivalenti 3. Aggiornare le importazioni 4. Adattare la tipizzazione delle funzioni consumatrici

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:

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

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 = {}));

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};

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);

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

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}

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}

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}

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;

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

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