Comment utiliser les énumérations dans TypeScript

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 énumérations permettent de représenter un ensemble fixe de valeurs sous forme de constantes. Ils peuvent aider à rendre votre code plus expressif et auto-documenté en donnant des noms significatifs à des valeurs spécifiques. Ici, vous apprendrez comment utiliser les énumérations dans 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 énumérations représentent les données sous la forme d'un ensemble de paires clé/valeur appelées membres d'énumération. La clé doit toujours être une chaîne. Cependant, la valeur (un nombre auto-incrémenté par défaut) peut être numérique, une chaîne ou calculée.

Vous pouvez créer une énumération dans le langage TypeScript en utilisant le énumération mot-clé. Faites-le suivre du nom de l'énumération et d'une paire d'accolades ({}) contenant les membres enum. Une convention de nommage JavaScript commune indique que les noms d'énumération doivent commencer par une majuscule.

énumération Direction {
 En haut,
 Bas,
 Gauche,
 Droite
}

Cet exemple comporte une énumération appelée Direction. L'énumération a un membre représentant chaque direction: Haut, Bas, Gauche et Droite.

Étant donné que ce code ne spécifie pas de valeur pour chacune des clés, TypeScript attribuera automatiquement des valeurs. Le premier membre, Up, aura une valeur de 0. Les membres restants 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 :

énumération Direction {
 Haut = 0,
 Bas = 1,
 Gauche = 2,
 Droite = 3,
}

Ou vous pouvez explicitement déclarer différentes valeurs, laissant les valeurs non déclarées continuer à s'incrémenter comme avant :

énumération Statut {
 Actif = 9,
 Inactif, // 10
}

Dans cet exemple, le membre inactif a une valeur de 10. Ce comportement s'applique aux énumérations qui n'ont que des valeurs numériques, pas celles avec des chaînes ou des membres hétérogènes.

Les différents types d'énumération

Les énumérations dans TypeScript ont un type implicite qu'elles basent sur le type de valeurs que leurs membres détiennent. Le type le plus courant est l'énumération numérique, dont le comportement est couvert par la section précédente, mais il existe deux variantes.

Énumérations de chaîne

Une énumération de chaîne est une énumération dans laquelle tous ses membres sont des chaînes. Contrairement aux énumérations numériques, où les valeurs sont automatiquement attribuées, vous devez initialiser chaque membre avec une chaîne :

énumération Couleurs primaires {
 Rouge = "ROUGE",
 Jaune = "JAUNE",
 Bleu = "BLEU"
}

Bien que les énumérations de chaînes n'aient pas de propriétés d'auto-incrémentation, elles peuvent avoir plus de sens si vous les sérialisez. Leurs valeurs doivent toujours être descriptives, sans noms de membres, tandis qu'un ensemble de valeurs numériques peut ne pas être auto-descriptif.

Énumérations hétérogènes

Les énumérations hétérogènes sont des énumérations qui contiennent à la fois des membres numériques et des chaînes. Par exemple:

énumération Résultat {
 Succès = "SUCCÈS",
 Échec = 0
}

Les énumérations hétérogènes sont utiles lorsque vous avez des membres d'énumération qui nécessitent différents types de valeur en fonction du contexte ou de la signification spécifique de chaque membre. Cependant, le Documentation TypeScript décourage l'utilisation d'énumérations hétérogènes car elles introduisent une complexité qui peut rendre votre code plus sujet aux erreurs.

Membres d'énumération calculés et constants

Chaque membre enum a une valeur, qui peut être constante ou calculée.

Membres d'énumération constante

Un membre enum est constant s'il satisfait l'une des conditions ci-dessous.

1. C'est le premier membre de l'énumération et n'a pas d'initialiseur.
2. Il n'a pas d'initialiseur et le membre enum précédent était une constante numérique.
3. Il est initialisé avec une expression enum constante.

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 ou un littéral numérique.

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

// CAS 1
énumération Direction {
 En haut,
 Bas,
 Gauche,
 Droite
}
// CAS 2
énumération Jour de la semaine {
 Lundi = 1,
 Mardi,
 Mercredi,
 Jeudi,
 Vendredi
}
// CAS 3
énumération Saison {
 Printemps = "PRINTEMPS",
 Été = "ÉTÉ",
 Automne = "AUTOMNE",
 Hiver = "HIVER"
}

Lorsque vous transpilez des membres constants enum en JavaScript brut, 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'énumération Season :

var Saison;
(fonction (Saison) {
 Saison["Printemps"] = "PRINTEMPS";
 Saison["Été"] = "ÉTÉ";
 Saison["Automne"] = "AUTOMNE";
 Saison["Hiver"] = "HIVER";
})(Saison || (Saison = {}));

Membres d'énumération calculés

Vous pouvez utiliser des membres d'énumération calculés pour attribuer des valeurs aux membres d'énumération en fonction d'expressions ou d'autres calculs dynamiques. Par exemple:

énumération Taille {
 Petit = 1,
 Moyen = calculerTaille(12),
 Grand = calculerTaille(5)
}
fonctioncalculerTaille(valeur: nombre): nombre{
retour valeur * 5;
}
console.log (Taille. Grand)

Le Taille enum a trois membres: Petit, Moyen, et Grand. Il affecte explicitement la valeur 1 au petit membre. Le Moyen et Grand les membres utilisent une fonction calculerTaille pour calculer leurs valeurs à l'exécution.

Lorsque vous travaillez avec des membres enum calculés, il est important de noter que les valeurs ne sont connues qu'au moment de l'exécution. Cela peut introduire plus de complexité et de potentiel erreurs d'exécution par rapport aux membres enum avec des valeurs constantes.

Par exemple:

var Taille;
(fonction (Taille) {
 Taille[Taille["Petit"] = 1] = "Petit";
 Taille[Taille["Moyen"] = calculTaille(12)] = "Moyen";
 Taille[Taille["Grand"] = calculTaille(5)] = "Grand";
})(Taille || (Taille = {}));
console.enregistrer(Taille.Grand)

Le bloc de code ci-dessus est la version transpilée du Taille énumération. Notez 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 d'origine afin que JavaScript détermine les valeurs au moment de l'exécution.

Accéder aux valeurs d'énumération

Vous pouvez accéder aux valeurs des membres enum à l'aide de la notation pointée de l'objet.

Par exemple:

énumération Direction {
 Haut = 0,
 Bas = 1,
 Gauche = 2,
 Droite = 3,
}
console.log (Direction. Gauche) // 2

Cartographie inversée des énumérations numériques

Le mappage inversé dans les énumérations numériques fait référence à la possibilité d'extraire le nom de membre d'énumération correspondant à partir de sa valeur. Cela peut être particulièrement utile lorsque vous travaillez avec des valeurs numériques, que vous devrez peut-être décoder.

Par défaut, les valeurs 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 effectuer manuellement un mappage inversé pour récupérer le membre enum en fonction de sa valeur.

Par exemple:

énumération Direction {
 Haut = 1,
 Bas,
 Gauche,
 Droite
}
fonctiongetDirectionName(directionValeur: nombre): chaîne{
// Mappage inversé
constante directionName = Direction[directionValue] ;
retour directionName ;
}
console.log (getDirectionName(1)); // "En haut"
console.log (getDirectionName(3)); // "Gauche"

Ce getDirectionName La fonction effectue un mappage inverse en accédant au nom du membre enum en utilisant sa valeur comme index. La fonction prend un directionValue comme argument et récupère le nom de membre enum correspondant en utilisant Direction[directionValeur].

Le mappage inversé peut être pratique dans les scénarios où vous avez une valeur numérique et devez déterminer le nom de membre enum correspondant. Il fournit un moyen pratique de travailler avec des énumérations dans les sens avant et arrière.

Il existe de nombreuses applications des énumérations

Vous pouvez utiliser des énumérations dans divers scénarios, tels que la gestion d'instructions switch, la définition de paramètres de fonction, le mappage de données et la représentation de choix ou de paramètres.

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