Une énumération, ou un type énuméré, est une structure de données qui vous permet de définir un ensemble de valeurs nommées.



Les enums permettent de représenter un ensemble fixe de valeurs en tant que constantes. Elles peuvent aider à rendre votre code plus expressif et auto-documenté en donnant des noms significatifs à des valeurs spécifiques. Vous apprendrez ici comment utiliser les enums en TypeScript.



Création d’une énumération

Les énumérations représentent généralement un nombre fixe d’options pour une valeur donnée. Par exemple, une énumération représentant les couleurs primaires peut avoir des valeurs fixes pour le rouge, le jaune et le bleu.

Les enums représentent les données sous la forme d’un ensemble de paires clé/valeur appelées membres de l’enum. La clé doit toujours être une chaîne de caractères. Cependant, la valeur – un nombre auto-incrémenté par défaut – peut être numérique, une chaîne de caractères ou calculée.

Vous pouvez créer un enum en langage TypeScript à l’aide de la méthode enum mot-clé. Il est suivi du nom de l’enum et d’une paire d’accolades ({}) contenant les membres de l’énumération. Une convention de nommage JavaScript courante stipule que les noms des enums doivent commencer par une lettre majuscule.

 enum Direction {
  Up,
  Down,
  Left,
  Right
}

Cet exemple présente un enum appelé Direction. L’enum comporte un membre représentant chaque direction : Haut, Bas, Gauche et Droite.

Comme ce code ne spécifie pas de valeur pour chacune des clés, TypeScript attribue automatiquement des valeurs. Le premier membre, Up, aura une valeur de 0. Les autres membres auront chacun une valeur supérieure de 1 à celle du membre précédent. Vous pouvez le déclarer explicitement si vous avez du mal à vous en souvenir :

 enum Direction {
  Up = 0,
  Down = 1,
  Left = 2,
  Right = 3,
}

Vous pouvez également déclarer explicitement des valeurs différentes, en laissant les valeurs non déclarées continuer à s’incrémenter comme avant :

 enum Status {
  Active = 9,
  Inactive, // 10
}

Dans cet exemple, le membre Inactive a une valeur de 10. Ce comportement s’applique aux enums qui n’ont que des valeurs numériques, et non à ceux dont les membres sont des chaînes de caractères ou des éléments hétérogènes.


Les différents types d’enum

Les enums en TypeScript ont un type implicite qu’ils basent sur le type des valeurs de leurs membres. Le type le plus courant est l’enum numérique, dont la section précédente couvre le comportement, mais il existe deux variantes.

Enum de chaînes de caractères

Une énumération de chaînes de caractères est une énumération dont tous les membres sont des chaînes de caractères. Contrairement aux enums numériques, où les valeurs sont automatiquement attribuées, vous devez initialiser chaque membre avec une chaîne de caractères :

 enum PrimaryColors {
  Red = "RED",
  Yellow = "YELLOW",
  Blue = "BLUE"
}

Bien que les enums de chaînes n’aient pas de propriétés auto-incrémentées, ils peuvent avoir plus de sens si vous les sérialisez. Leurs valeurs doivent toujours être descriptives, sans nom de membre, alors qu’un ensemble de valeurs numériques peut ne pas être auto-descriptif.

Enums hétérogènes

Les enums hétérogènes sont des enums qui contiennent à la fois des membres numériques et des membres de type chaîne de caractères. Par exemple :

 enum Result {
  Success = "SUCCESS",
  Failure = 0
}

Les enums hétérogènes sont utiles lorsque les membres de l’enum nécessitent différents types de valeurs en fonction du contexte ou de la signification spécifique de chaque membre. Cependant, la documentation TypeScript déconseille l’utilisation des enums hétérogènes car ils introduisent une complexité qui peut rendre votre code plus sujet aux erreurs.


Membres de l’enum calculés et constants

Chaque membre d’une énumération possède une valeur, qui peut être soit constante, soit calculée.

Membres constants de l’enum

Un membre d’énumération est constant s’il satisfait à l’une des conditions ci-dessous.

  1. Il s’agit du premier membre de l’enum et il n’a pas d’initialisateur.
  2. Il n’a pas d’initialisateur et le membre précédent de l’enum était une constante numérique.
  3. Il est initialisé avec une expression constante de l’enum.

Selon la documentation TypeScript, une expression enum constante est un sous-ensemble d’expressions TypeScript qui peuvent être entièrement évaluées au moment de la compilation. Par exemple, une chaîne de caractères ou un littéral numérique.

Par exemple, les membres des enums dans le bloc de code ci-dessous sont tous constants :

 // CASE 1
enum Direction {
  Up,
  Down,
  Left,
  Right
}

// CASE 2
enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

// CASE 3
enum Season {
  Spring = "SPRING",
  Summer = "SUMMER",
  Autumn = "AUTUMN",
  Winter = "WINTER"
}

Lorsque vous transposez les membres constants d’une énumération en JavaScript, le code généré utilise leurs valeurs littérales. Cela peut être bénéfique pour les performances et faciliter le débogage.

Par exemple, voici la version transpilée de l’enum Season :

 var Season;
(function (Season) {
    Season["Spring"] = "SPRING";
    Season["Summer"] = "SUMMER";
    Season["Autumn"] = "AUTUMN";
    Season["Winter"] = "WINTER";
})(Season || (Season = {}));

Membres calculés de l’énumération

Vous pouvez utiliser les membres calculés de l’enum pour attribuer des valeurs aux membres de l’enum sur la base d’expressions ou d’autres calculs dynamiques. Par exemple :

 enum Size {
  Small = 1,
  Medium = calculateSize(12),
  Large = calculateSize(5)
}

function calculateSize(value: number): number {
  return value * 5;
}

console.log(Size.Large)

L’élément Taille L’enum a trois membres : Petit, Moyenet Grandes. Il attribue explicitement la valeur 1 au membre Small. La valeur Moyen et Grandes les membres utilisent une fonction calculerTaille pour calculer leurs valeurs au moment de l’exécution.

Lorsque l’on travaille avec des membres d’énumération calculés, il est important de noter que les valeurs ne sont pas connues avant l’exécution. Cela peut introduire une plus grande complexité et des erreurs d’exécution potentielles par rapport aux membres de l’enum avec des valeurs constantes.

Par exemple :

 var Size;
(function (Size) {
    Size[Size["Small"] = 1] = "Small";
    Size[Size["Medium"] = calculateSize(12)] = "Medium";
    Size[Size["Large"] = calculateSize(5)] = "Large";
})(Size || (Size = {}));

console.log(Size.Large)

Le bloc de code ci-dessus est la version transposée de la fonction Taille enum. Remarquez que TypeScript n’inclut pas les valeurs de retour de calculateSize() dans le code JavaScript. Au lieu de cela, il inclut l’appel de fonction original afin que JavaScript détermine les valeurs au moment de l’exécution.


Accès aux valeurs des énumérations

Vous pouvez accéder aux valeurs des membres d’une énumération à l’aide de la notation par points de l’objet.

Par exemple :

 enum Direction {
  Up = 0,
  Down = 1,
  Left = 2,
  Right = 3,
}

console.log(Direction.Left) // 2

Cartographie inversée des Enums numériques

Le mappage inverse dans les enums numériques fait référence à la possibilité de récupérer le nom du membre correspondant de l’enum à partir de sa valeur. Cela peut s’avérer particulièrement utile lorsque l’on travaille avec des valeurs numériques, qu’il peut être nécessaire de décoder.

Par défaut, les valeurs d’enum dans TypeScript sont mappées vers l’avant, ce qui signifie que vous ne pouvez accéder qu’à la valeur associée à un nom. Cependant, vous pouvez manuellement effectuer un mappage inverse pour récupérer le membre de l’enum en fonction de sa valeur.

Par exemple :

 enum Direction {
  Up = 1,
  Down,
  Left,
  Right
}

function getDirectionName(directionValue: number): string {
  // Reverse mapping
  const directionName = Direction[directionValue];
  return directionName;
}

console.log(getDirectionName(1)); // "Up"
console.log(getDirectionName(3)); // "Left"

Cette getDirectionName La fonction « getDirectionName » effectue un mappage inverse en accédant au nom du membre de l’énumération en utilisant sa valeur comme index. La fonction prend un directionValue en tant qu’argument et récupère le nom du membre de l’enum correspondant en utilisant la commande Direction[directionValue].

Le mappage inverse peut s’avérer pratique dans les cas où vous disposez d’une valeur numérique et que vous devez déterminer le nom du membre de l’énumération correspondant. Il s’agit d’un moyen pratique de travailler avec les enums dans les deux sens, vers l’avant et vers l’arrière.


Les enums ont de nombreuses applications

Vous pouvez utiliser les enums dans différents scénarios, notamment pour gérer les instructions de commutation, définir les paramètres des fonctions, mapper des données et représenter des choix ou des paramètres.

Que vous ayez besoin de représenter un ensemble fini d’options ou de gérer des transitions d’état complexes, les enums en TypeScript sont un outil précieux pour améliorer la clarté et la structure de votre code.