La clé de la clarté du code

Table des matières

Les énumérations en TypeScript sont une notion fondamentale que l’on rencontre fréquemment lorsqu’on explore ce langage.

TypeScript, bien que relativement récent, s’est imposé comme l’un des langages de programmation les plus prisés des développeurs. Il s’agit d’une extension, ou plus précisément un sur-ensemble, de JavaScript. Par conséquent, tout code JavaScript valide est également considéré comme valide en TypeScript. Toutefois, TypeScript introduit le concept de typage statique, une fonctionnalité absente de JavaScript.

Alors, que sont exactement les énumérations en TypeScript, quels sont leurs cas d’utilisation et comment les créer ? Cet article a pour objectif de couvrir tous les aspects essentiels de cette fonctionnalité.

Qu’est-ce qu’une énumération en TypeScript ?

Les énumérations, ou types énumérés, sont des structures de données de taille fixe qui contiennent un ensemble de valeurs immuables (constantes). TypeScript n’est pas le seul langage à exploiter les énumérations ; elles sont également présentes dans des langages orientés objet tels que C# et Java.

En TypeScript, les énumérations permettent aux développeurs de définir un ensemble de cas distincts ou de documenter des intentions. Elles jouent également un rôle crucial dans la définition de valeurs ou de propriétés qui ne peuvent prendre qu’un certain nombre de valeurs spécifiques. Par exemple, le nombre de continents sur Terre est fixe : sept.

En résumé, les énumérations TypeScript présentent les avantages suivants :

Elles offrent une grande flexibilité en permettant aux développeurs de documenter et d’exprimer clairement leurs intentions et cas d’utilisation.
Elles permettent de créer des constantes personnalisées économes en ressources en JavaScript.
Elles optimisent la compilation et l’exécution lors de la transformation du code TypeScript en JavaScript.

Les énumérations TypeScript peuvent être de type chaîne de caractères ou numérique. Cependant, elles sont pré-traitées et ne sont pas testées pendant la phase de test. TypeScript effectue une traduction/conversion des énumérations en code JavaScript.

Les différents types d’énumérations en TypeScript

Maintenant que vous avez une bonne compréhension des énumérations, il est temps de les voir en action dans le cadre de TypeScript. Pour ce faire, vous pouvez configurer un environnement de développement en installant TypeScript et Node.js sur votre ordinateur, ou opter pour des solutions en ligne. Nous allons utiliser le Terrain de jeu TypeScript afin d’illustrer les différents types d’énumérations.

Voici les différents types d’énumérations disponibles en TypeScript :

#1. Énumérations numériques

Pour définir une énumération, utilisez le mot-clé « enum » suivi du nom que vous souhaitez lui donner. Ensuite, utilisez des accolades pour spécifier les membres de cette énumération. Voici un exemple d’énumération numérique :

enum CardinalDirections {
  North = 5,
  East,
  South,
  West,
};

L’exemple ci-dessus définit une énumération nommée « CardinalDirections », composée de quatre membres. Dans ce cas, seulement quatre valeurs sont possibles (Nord, Est, Sud et Ouest), ce qui fait de l’énumération un outil idéal pour la gestion de données spécifiques.

J’ai explicitement assigné la valeur 5 à « CardinalDirections.North ». Cependant, je n’ai pas attribué de valeurs aux autres membres car TypeScript se charge de le faire automatiquement. Par exemple, la valeur de « CardinalDirections.East » sera 6, car TypeScript incrémente de 1 la valeur du membre précédent.

De même, « CardinalDirections.West » aura la valeur 8.

Que se passe-t-il si nous n’assignons aucune valeur au premier membre de l’énumération ? Dans ce cas, notre énumération ressemblerait à ceci :

enum CardinalDirections {
  North,
  East,
  South,
  West,
};

TypeScript attribuera automatiquement la valeur 0 à « North ». Si vous tapez « CardinalDirections.West », vous obtiendrez la valeur 3.

#2. Énumérations de chaînes de caractères

Dans une énumération de chaînes de caractères, chaque membre doit être initialisé avec une autre chaîne de l’énumération ou une chaîne littérale. Voici un exemple d’une telle énumération :

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

Contrairement aux énumérations numériques, les énumérations de chaînes de caractères n’incrémentent pas automatiquement les valeurs. Si vous exécutez le code suivant :

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}
console.log(Direction.Right)

Vous obtiendrez le résultat suivant :

« RIGHT »

#3. Énumérations hétérogènes

Il est possible de mélanger des membres de type numérique et chaîne de caractères pour créer une énumération hétérogène. Voici un exemple :

enum HeterogeneousEnum {
  No = 0,
  Yes = "YES",
}

#4. Membres d’énumération constants et calculés

Les membres d’une énumération sont associés à des valeurs qui peuvent être « constantes » ou « calculées ».

Voici un exemple d’une énumération constante :

enum E1 {
  X,
  Y,
  Z,
}

Dans cet exemple, le premier membre de l’énumération n’a pas d’initialiseur, et TypeScript lui attribue la valeur 0.

Vous pouvez également observer cet exemple :

enum E1 {
  X=1,
  Y,
  Z,
}

Il s’agit également d’une énumération constante, car le premier membre reçoit une valeur, et la règle d’incrémentation est appliquée aux membres restants.

Les énumérations calculées combinent des membres constants et calculés. Regardez cet exemple :

enum Color {
  Red = 100,
  Green = (Math.random() * 100),
  Blue = 200
}

Le membre « Blue » est une constante, tandis que le membre « Green » est une énumération calculée, utilisant la fonction `Math.random()` au moment de l’exécution.

#5. Const énumérations

Les énumérations constantes sont utilisées pour améliorer les performances des énumérations numériques. Dans ce cas, on déclare l’énumération en tant que « const ».

Considérez ce code qui affiche les jours de la semaine :

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

Si nous exécutons `console.log(Weekday.Thursday)`, nous obtenons la réponse 4. Toutefois, si nous examinons le code JavaScript généré lors de la compilation, nous obtenons ceci :

"use strict";
var Weekday;
(function (Weekday) {
    Weekday[Weekday["Monday"] = 1] = "Monday";
    Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
    Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
    Weekday[Weekday["Thursday"] = 4] = "Thursday";
    Weekday[Weekday["Friday"] = 5] = "Friday";
})(Weekday || (Weekday = {}));
console.log(Weekday.Thursday);

Nous pouvons modifier ce code et déclarer « Weekday » comme une constante :

const enum Weekday {
  Monday = 1,
  Tuesday,
  Wednesday,
  Thursday,
  Friday
}

Si nous exécutons `console.log(Weekday.Thursday)` avec cette modification, le code JavaScript généré lors de la compilation sera le suivant :

"use strict";
console.log(4 /* Weekday.Thursday */);

On constate que le code JavaScript généré lors de la compilation est optimisé lorsque vous déclarez votre énumération comme constante.

#6. Énumérations ambiantes

Les énumérations ambiantes utilisent le mot-clé « declare » pour décrire la forme d’énumérations existantes. Voici un exemple :

declare enum Color {
  Red,
  Green,
  Blue
}

Les énumérations ambiantes sont déclarées en dehors de tout module et peuvent être utilisées pour créer des types réutilisables. De ce fait, vous pouvez importer des énumérations ambiantes et les utiliser dans vos composants tant qu’elles sont déclarées globalement.

Vous comprenez maintenant les différents types d’énumérations en TypeScript. Nous allons maintenant voir comment utiliser les énumérations de différentes manières. Voici notre code de référence :

enum Direction {
  North="N",
  East="E",
  South="S",
  West="W",
};

Voici quelques exemples d’utilisation :

Extraire les membres de l’énumération. Par exemple, pour accéder à la valeur de « Nord », nous pouvons utiliser :

console.log(Direction.Nord); // Affiche : ‘N’

Utiliser des membres d’énumération : Vous pouvez sélectionner un membre spécifique pour représenter une direction. Par exemple :

const currentDirection = Direction.East;
console.log(`La direction actuelle est ${currentDirection}`);

Cela affichera « La direction actuelle est E ».

Énumérations et cartes d’objets en TypeScript

Les énumérations sont idéales pour représenter un ensemble fini de valeurs, comme les couleurs de l’arc-en-ciel ou les jours de la semaine. Elles sont fortement typées, ce qui permet de détecter les erreurs lors du développement. Voici un exemple d’énumération en TypeScript :

enum Color {
  Red,
  Green,
  Blue,
}

Les cartes d’objets, également appelées dictionnaires ou paires clé-valeur, sont utilisées pour stocker et récupérer des valeurs associées à des clés spécifiques. Vous pouvez utiliser les cartes d’objets TypeScript pour stocker tout type de données. Cependant, elles ne sont pas strictement typées, ce qui signifie que les erreurs de type peuvent ne pas être détectées lors du développement. Voici un exemple de carte d’objets pour les mêmes couleurs :

const colors = {
  red: "FF0000",
  green: "00FF00",
  blue: "0000FF",
};

Les principales différences entre les énumérations et les cartes d’objets en TypeScript sont :

Les énumérations sont strictement typées, contrairement aux cartes d’objets.
Les énumérations sont un « type », tandis que les cartes d’objets sont une structure de données.
Les énumérations sont moins flexibles que les cartes d’objets.

Meilleures pratiques d’utilisation des énumérations en TypeScript

Comme mentionné précédemment, TypeScript n’est pas le seul langage de programmation à proposer la fonctionnalité des énumérations. Suivre les meilleures pratiques garantit la qualité, l’optimisation et la réduction des bugs de votre code. Voici quelques-unes des meilleures pratiques pour utiliser les énumérations TypeScript :

Mettre les noms d’énumération en majuscule : Commencez toujours chaque mot du nom d’une énumération par une majuscule. Par exemple, préférez une énumération « Nombre » à une énumération « nombre ».
Utiliser les énumérations pour les constantes : Il est préférable d’utiliser les énumérations pour déclarer un ensemble fixe d’éléments associés. Par exemple, il n’y a que 7 jours dans la semaine. Les membres d’une énumération ne doivent jamais être modifiés pendant l’exécution du programme.
Éviter d’abuser des énumérations : Lorsque vous découvrez un nouveau concept, vous pouvez être tenté de l’utiliser partout dans votre projet TypeScript. Cependant, il est important d’utiliser les énumérations avec modération. Elles sont une bonne solution pour maintenir la lisibilité du code, mais ne les utilisez pas à outrance.
Considérer les énumérations comme des énumérations : Les énumérations TypeScript peuvent être utilisées à diverses fins. Toutefois, il est préférable de les réserver à la représentation d’énumérations et non d’autres structures de données.
Éviter les énumérations automatiques : TypeScript assigne des valeurs aux membres de l’énumération si vous ne le faites pas explicitement. Attribuez toujours explicitement des valeurs à vos énumérations pour éviter tout comportement inattendu lors de l’exécution de votre code.
Documenter les énumérations : Documentez ou commentez toujours votre code si vous souhaitez qu’il soit utilisé par d’autres développeurs. Expliquez clairement le rôle de chaque énumération et ses cas d’utilisation appropriés.

Vous pouvez également explorer les principales bibliothèques TypeScript et les environnements d’exécution essentiels à connaître en tant que développeur.

Conclusion

Nous avons exploré la définition des énumérations en TypeScript, ainsi que les différents types et leurs cas d’utilisation. TypeScript est un atout précieux pour produire un code clair et structuré. Cependant, il existe des situations où il est préférable d’éviter les énumérations et d’opter pour les objets.

Par exemple, n’utilisez pas d’énumérations lorsque vous manipulez des valeurs dynamiques. De même, vous ne pouvez pas utiliser les énumérations comme des variables, car cela entraînera des erreurs.

Si vous avez encore des difficultés à différencier TypeScript et JavaScript, n’hésitez pas à approfondir vos connaissances sur leurs différences.

0 Partages