Générateur d'enums TypeScript en ligne

Qu'est-ce qu'un enum TypeScript ?

Un enum (abréviation d'enumeration) est un type TypeScript permettant de définir un ensemble de constantes nommées. Il rend le code plus lisible, plus sûr et auto-documenté, en remplaçant les "magic values" (0, 1, 'active'…) par des identifiants expressifs.

TypeScript propose 4 variantes d'enums, chacune avec ses avantages et ses cas d'usage spécifiques.

// Déclaration d'un enum numérique simple
// Les valeurs sont auto-incrémentées à partir de 0
export enum UserRole {
  Admin   = 0,   // → UserRole.Admin vaut 0
  User    = 1,   // → UserRole.User vaut 1
  Guest   = 2    // → UserRole.Guest vaut 2
}

// Utilisation avec typage fort
function getPermissions(role: UserRole): string[] {
  // TypeScript refuse toute valeur qui n'est pas UserRole
  if (role === UserRole.Admin) {
    return ['read', 'write', 'delete'];
  }
  return ['read'];
}

// Appel correct
const perms = getPermissions(UserRole.Admin);
// Appel incorrect — erreur TypeScript à la compilation
// getPermissions(99); // Argument of type '99' is not assignable to type 'UserRole'

Les 4 types d'enums expliqués

1. Enum numérique (Numeric enum)

Le type le plus courant. Les valeurs sont des entiers auto-incrémentés à partir de 0, ou définis manuellement.

// Enum numérique avec valeurs automatiques
export enum Direction {
  Up,    // = 0
  Down,  // = 1
  Left,  // = 2
  Right  // = 3
}

// Enum numérique avec valeurs HTTP personnalisées
export enum HttpStatus {
  OK          = 200,
  Created     = 201,
  BadRequest  = 400,
  Unauthorized = 401,
  NotFound    = 404
}

// Accès aux valeurs
const status: HttpStatus = HttpStatus.OK; // = 200
console.log(HttpStatus[200]); // "OK" — reverse mapping natif !

2. Enum string (String enum)

Chaque valeur est une chaîne explicite. Idéal pour la sérialisation JSON, les API et les comparaisons lisibles.

// Enum string — chaque valeur est une chaîne explicite
export enum Status {
  Active   = 'active',    // la valeur string est visible en debug
  Inactive = 'inactive',
  Pending  = 'pending'
}

// Utilisation dans une condition
function filterUsers(status: Status) {
  // Comparaison sûre et lisible
  return users.filter(u => u.status === status);
}

// Sérialisation JSON propre
const payload = { status: Status.Active }; // { status: 'active' }

3. Const enum (optimisation compilation)

Le mot-clé const indique au compilateur de substituer les valeurs directement dans le code JavaScript généré. Aucun objet enum n'est créé à l'exécution.

// Const enum — zéro overhead à l'exécution
export const enum Color {
  Red   = 'red',
  Green = 'green',
  Blue  = 'blue'
}

// Usage identique à un enum normal
const c: Color = Color.Red;

// JavaScript généré (avec const enum) :
// const c = 'red';
// Pas d'objet Color créé — optimisation mémoire et bundle

4. Enum hétérogène (Heterogeneous enum)

Mélange de valeurs numériques et string. Rarement utilisé — à réserver aux cas très spécifiques de migration ou d'interopérabilité.

// Enum hétérogène — mélange number et string
// Utilisation déconseillée sauf cas spécifique
export enum BoolLike {
  No  = 0,      // valeur numérique
  Yes = 'YES'   // valeur string
}

const flag: BoolLike = BoolLike.Yes; // 'YES'

enum vs const enum vs union types

TypeScript offre plusieurs façons de modéliser un ensemble de valeurs connues. Voici un comparatif pour choisir la bonne approche selon votre cas d'usage.

// Option 1 : enum TypeScript classique
export enum ThemeEnum { Light = 'light', Dark = 'dark' }

// Option 2 : union de types littéraux (plus léger)
export type Theme = 'light' | 'dark';

// Option 3 : object as const (compatible JS pur)
export const THEME = { Light: 'light', Dark: 'dark' } as const;
export type Theme = typeof THEME[keyof typeof THEME];

// Comparaison d'utilisation
function applyTheme(t: ThemeEnum) {} // enum
function applyTheme(t: Theme) {}     // union — plus flexible

Utiliser les enums dans Angular

Dans Angular, les enums sont très utiles pour typer les états d'un composant, les routes, les permissions, ou les statuts d'une ressource.

// user-role.enum.ts — fichier dédié
export enum UserRole {
  Admin     = 'admin',
  User      = 'user',
  Moderator = 'moderator',
  Guest     = 'guest'
}

// auth.service.ts — typage fort du rôle courant
import { Injectable, signal } from '@angular/core';
import { UserRole } from './user-role.enum';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // Signal Angular avec type enum
  readonly role = signal<UserRole>(UserRole.Guest);

  setRole(role: UserRole): void {
    this.role.set(role);
  }

  isAdmin(): boolean {
    return this.role() === UserRole.Admin;
  }
}

// dashboard.component.ts — utilisation dans un template
import { Component, inject } from '@angular/core';
import { UserRole } from './user-role.enum';
import { AuthService } from './auth.service';

@Component({
  standalone: true,
  template: `
    <!-- Exposer l'enum au template via une propriété de classe -->
    <div *ngIf="auth.role() === UserRole.Admin">
      Section admin
    </div>
  `
})
export class DashboardComponent {
  readonly auth = inject(AuthService);
  // Exposer l'enum pour l'utiliser dans le template HTML
  readonly UserRole = UserRole;
}

Pièges courants à éviter

Piège 1 — Reverse mapping involontaire

Les enums numériques génèrent un objet avec un mapping bidirectionnel. Itérer naïvement sur Object.keys() retourne à la fois les noms ET les valeurs.

enum Direction { Up = 0, Down = 1 }

// Piège : Object.keys retourne ["0", "1", "Up", "Down"]
Object.keys(Direction).forEach(k => console.log(k));

// Solution : filtrer les clés numériques
const names = Object.keys(Direction)
  .filter(k => isNaN(Number(k)));  // ["Up", "Down"]

// Ou utiliser Object.values pour les enums string
enum Status { Active = 'active', Pending = 'pending' }
const vals = Object.values(Status); // ["active", "pending"] — pas de reverse map

Piège 2 — Assignation de valeur numérique brute

TypeScript autorise (à tort) l'assignation d'un nombre à une variable typée enum numérique, sans erreur de compilation.

enum UserRole { Admin = 0, User = 1 }

// Pas d'erreur TypeScript — comportement surprenant !
const role: UserRole = 999; // TypeScript l'accepte pour les enums numériques

// Solution : utiliser un type guard pour valider
function isUserRole(value: number): value is UserRole {
  // Vérifie que la valeur est dans les valeurs connues de l'enum
  return Object.values(UserRole).includes(value as UserRole);
}

// Usage sécurisé
const raw: number = 999;
if (isUserRole(raw)) {
  // Ici, raw est bien de type UserRole
  console.log('Rôle valide :', UserRole[raw]);
}

Piège 3 — const enum et isolatedModules

La compilation avec isolatedModules: true (activé par défaut avec Vite/esbuild dans Angular 16+) ne supporte pas les const enum cross-fichiers.

// tsconfig.json
{
  "compilerOptions": {
    "isolatedModules": true  // Angular 16+ par défaut avec esbuild
  }
}

// ❌ Erreur : const enum cross-fichier avec isolatedModules
// export const enum Color { Red = 'red' }  // interdit depuis un autre fichier

// ✅ Solution : enum normal ou inliner la const enum dans le même fichier
export enum Color { Red = 'red', Green = 'green', Blue = 'blue' }

// ✅ Ou utiliser un objet as const à la place
export const COLOR = { Red: 'red', Green: 'green', Blue: 'blue' } as const;
export type Color = typeof COLOR[keyof typeof COLOR];

• Utilisez des enums string pour les APIs et la sérialisation JSON
• Utilisez des enums numériques pour les flags et codes HTTP
• Évitez const enum dans les bibliothèques publiées
• Exposez toujours l'enum dans la classe pour l'utiliser dans un template Angular
• Créez un fichier *.enum.ts dédié pour chaque enum important

Conclusion

Les enums TypeScript sont un outil puissant pour rendre votre code plus lisible, plus sûr et auto-documenté. En choisissant le bon type — numérique pour les codes et flags, string pour les APIs, const enum pour l'optimisation — vous évitez les "magic values" et bénéficiez du typage statique de TypeScript.

Utilisez ce générateur pour créer vos enums en quelques secondes, avec préréglages prêts à l'emploi et génération du code d'utilisation. Copiez le code directement dans votre projet Angular ou TypeScript.