TypeScript : Pourquoi préférer les Maps aux Enums ?

Les enum en TypeScript peuvent sembler être un choix naturel pour représenter un ensemble fixe de valeurs. Cependant, ils présentent des limitations importantes qui peuvent affecter la maintenabilité et les performances de votre code. Examinons pourquoi les Map constituent souvent une meilleure alternative.

Le problème avec les Enums

Les enums présentent plusieurs inconvénients majeurs qui deviennent apparents lors du développement d'applications complexes :

1. Rigidité : Impossible de les modifier dynamiquement
2. Performances : Génération de code JavaScript verbose
3. Typage complexe : Difficultés avec l'introspection et les unions de types
4. Bundle size : Impact sur la taille du code final

Prenons un exemple concret :

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

Ce code transpilé génère :

• Un objet avec des propriétés miroir (clé ↔ valeur)
• Une IIFE (Immediately Invoked Function Expression) superflue
• Une double référence pour chaque valeur
• Du code supplémentaire qui impacte les performances

La solution avec les Maps

Les Map et objets TypeScript offrent une approche plus élégante et flexible :

typescript
1// Solution avec const et types
2const Status = {
3  Active: 'ACTIVE',
4  Inactive: 'INACTIVE',
5} as const;
6
7// Type déduit automatiquement
8type Status = (typeof Status)[keyof typeof Status];
9
10// Code transpilé simple et efficace
11const Status = {
12  Active: 'ACTIVE',
13  Inactive: 'INACTIVE',
14};

Avantages des Maps

1. Type-safety

typescript
1function processStatus(status: Status) {
2  // Erreur de compilation si status invalide
3  console.log(status);
4}
5
6// Validation runtime
7const isValidStatus = (status: string): status is Status =>
8  Object.values(Status).includes(status as Status);

2. Extensibilité

typescript
1// Ajout dynamique possible (si nécessaire)
2const ExtendedStatus = {
3  ...Status,
4  Pending: 'PENDING' as const,
5};

3. Patterns avancés

typescript
1// Configuration associée
2const StatusConfig = {
3  [Status.Active]: {
4    color: 'green',
5    label: 'Actif',
6    icon: 'check',
7  },
8  [Status.Inactive]: {
9    color: 'red',
10    label: 'Inactif',
11    icon: 'cross',
12  },
13} as const;
14
15// Type utilitaire
16type StatusConfig = {
17  [K in Status]: {
18    color: string;
19    label: string;
20    icon: string;
21  };
22};
23
24// Fonction helper typée
25function getStatusConfig(status: Status) {
26  return StatusConfig[status];
27}

Cas d'usage pratiques

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

2. Gestion d'états

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 vérifie l'exhaustivité
17  }
18}

Tableau comparatif détaillé

Voici une comparaison détaillée entre les Enums et les Maps :

Type-safety

• Enum : Basique (✓)
• Map : Avancé avec inférence de type (✓✓)

Performance runtime

• Enum : Moins performant (✗)
• Map : Plus performant (✓)

Taille du bundle

• Enum : Plus lourd (✗)
• Map : Plus léger (✓)

Extensibilité

• Enum : Difficile à étendre (✗)
• Map : Facilement extensible (✓)

Introspection

• Enum : Capacités limitées
• Map : Capacités complètes

Compatibilité TypeScript strict

• Enum : Compatible (✓)
• Map : Totalement compatible avec plus de fonctionnalités (✓✓)

Maintenance

• Enum : Plus complexe à maintenir
• Map : Plus simple à maintenir

Bonnes pratiques

1. Nommage explicite

typescript
1// Préférer
2const HttpStatus = {
3  Ok: 200,
4  NotFound: 404,
5  ServerError: 500,
6} as const;
7
8// À éviter
9const Status = {
10  a: 200,
11  b: 404,
12  c: 500,
13} as const;

2. Union types

typescript
1// Création d'unions type-safe
2type HttpSuccessStatus = 200 | 201 | 204;
3type HttpErrorStatus = 400 | 401 | 404 | 500;
4type HttpStatus = HttpSuccessStatus | HttpErrorStatus;

3. Validation runtime

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

Conclusion

Les Maps offrent une alternative plus robuste aux enums avec :

• Un typage plus précis et flexible
• De meilleures performances runtime
• Une maintenance simplifiée
• Une meilleure compatibilité avec l'écosystème JavaScript

Pour approfondir ces concepts, consultez :

• Documentation TypeScript
• TypeScript Handbook
• TypeScript Deep Dive

N'hésitez pas à contribuer à cet article en partageant vos retours d'expérience !