TypeScript enums: définir des valeurs constantes pour les variables

Les TypeScript enums sont une classe spéciale qui se compose de variables constantes. Vous pouvez définir la valeur de ces variables à l’avance. On distingue les enums numériques et les enums basés sur des strings.

Les TypeScript enums, c’est quoi au juste ?

Les enums (abréviation de « enumerated types », c’est-à-dire « types énumérés ») sont des types de données qui ont un ensemble de valeurs constantes. Cet ensemble de valeurs est déjà clairement défini lors de la déclaration d’un enum avec un identificateur et ne peut pas être modifié par la suite. L’ordre dans lequel les valeurs peuvent apparaître peut aussi être défini à l’avance. Les TypeScript enums permettent de créer des variables constantes qui augmentent la lisibilité de votre code tout en évitant les erreurs. Les enums TypeScript ne sont pas uniquement une extension typée de JavaScript, mais sont transpilés en objets JavaScript standards, ce qui les rend utilisables directement dans le code JavaScript généré.

On distingue les enums numériques et les TypeScript enums basés sur un string. Découvrons ensemble les deux variantes.

TypeScript enums numériques

Pour les TypeScript enums numériques, la première valeur par défaut est « 0 ». Par la suite, chaque valeur supplémentaire est augmentée de « 1 ». La méthode est initiée avec le paramètre enum et stocke les strings en format numérique. Dans l’exemple simple ci-dessous, nous définissons les mois et, dans un premier temps, nous leur attribuons une valeur. Ensuite, nous demandons la valeur définie pour le mois d’avril :

enum Mois {
	Janvier,
	Février,
	Mars,
	Avril,
	Mai,
	Juin,
	Juillet,
	Août,
	Septembre,
	Octobre,
	Novembre,
	Décembre
}
let MoisActuel = Mois.Avril;
console.log(MoisActuel);

Le résultat obtenu est le suivant :

3

Par défaut, le système démarre l’affectation des valeurs à « 0 ». Janvier reçoit donc la valeur « 0 », février la valeur « 1 », mars la valeur « 2 » et avril la valeur recherchée « 3 ». Comme cela ne correspond pas à la numérotation réelle des mois, nous initialisons les TypeScript enums et leur attribuons nous-mêmes les valeurs correspondantes. Pour ce faire, nous devons juste légèrement modifier le code ci-dessus :

enum Mois {
	Janvier = 1,
	Février,
	Mars,
	Avril,
	Mai,
	Juin,
	Juillet,
	Août,
	Septembre,
	Octobre,
	Novembre,
	Décembre
}
let MoisActuel = Mois.Avril;
console.log(MoisActuel);

Désormais le résultat est :

4

Il suffit d’attribuer la valeur souhaitée au premier mois. Le système compte alors comme d’habitude une position de plus.

Attribuer ses propres valeurs numériques

Si vous souhaitez éviter le comptage automatique, vous pouvez également attribuer une valeur numérique propre à chaque valeur des enums TypeScript. Dans l’exemple suivant, nous avons quatre tomes d’une série de romans et souhaitons définir leur nombre de pages comme valeur fixe. Nous souhaitons ensuite vérifier le nombre de pages du deuxième volume. Le code ressemble à ceci :

enum NuméroDePage {
	Tome1 = 491,
	Tome2 = 406,
	Tome3 = 360,
	Tome4 = 301
}
let pages = NuméroDePage.Tome2;
console.log(pages);

Le résultat obtenu est :

406

TypeScript enums basés sur des strings

Les TypeScript enums basés sur des strings fonctionnent selon un principe très similaire. Ici, vous n’attribuez pas de valeur numérique aux enums, mais une chaîne de caractères (string). Dans l’exemple suivant, nous attribuons à chaque jour de la semaine une abréviation appropriée selon le format String et la plaçons entre guillemets. Nous récupérons ensuite les valeurs pour « vendredi » et « mardi » à titre de vérification. Le code se présente ainsi :

enum JoursDeSemaine {
Lundi = "lun",
Mardi = "mar",
Mercredi = "mer",
Jeudi = "jeu",
Vendredi = "ven",
Samedi = "sam",
Dimanche = "dim"
};
console.log(JoursDeSemaine.Vendredi);
console.log(JoursDeSemaine.Mardi);

Le résultat correspondant est :

ven
mar

Combiner des numéros et des strings

En théorie, il est aussi tout à fait possible de combiner des TypeScript enums numériques et des enums basés sur string. Les applications possibles pour cette option sont plutôt limitées, mais pour être complet, voici un exemple. Nous définissons ici différentes valeurs. La procédure reste néanmoins la même :

enum JoursDeSemaine {
Lundi = "lun",
Mardi = 2,
Mercredi = 3,
Jeudi = "jeu",
Vendredi = "ven",
Samedi = 6,
Dimanche = "di"
};
console.log(JoursDeSemaine.Vendredi);
console.log(JoursDeSemaine.Mardi);

Le résultat obtenu est alors le suivant :

ven
2

Mappage inverse pour les types de données constants

La logique du mappage inverse (à vrai dire une « affectation inverse ») est la suivante : si on peut accéder à la valeur d’un TypeScript enum, on peut aussi, simultanément, accéder à son nom. Pour mieux comprendre ce principe, reprenons notre exemple avec les jours de la semaine :

enum JoursDeSemaine {
    Lundi = 1,
    Mardi,
    Mercredi,
    Jeudi,
    Vendredi,
    Samedi,
    Dimanche
}
console.log(JoursDeSemaine.Vendredi); // 5
console.log(JoursDeSemaine["Vendredi"]); // 5
console.log(JoursDeSemaine[5]); // "Samedi"

Dans cet exemple, JoursDeSemaine.Vendredi génère la valeur « 5 ». Il en va de même pour JoursDeSemaine["Vendredi"]. Cependant, grâce au mappage inverse, JoursDeSemaine[5] génère le nom « Samedi ». En voici la démonstration avec cette commande simple :

enum JoursDeSemaine {
    Lundi = 1,
    Mardi,
    Mercredi,
    Jeudi,
    Vendredi,
    Samedi,
    Dimanche
}
console.log(JoursDeSemaine);

Le résultat est le suivant :

{
    '1': 'Lundi',
    '2': 'Mardi',
    '3': 'Mercredi',
    '4': 'Jeudi',
    '5': 'Vendredi',
    '6': 'Samedi',
    '7': 'Dimanche',
    Lundi: 1,
    Mardi: 2,
    Mercredi: 3,
    Jeudi: 4,
    Vendredi: 5,
    Samedi: 6,
    Dimanche: 7
}

Convertir des TypeScript enums en arrays

Il est également possible de convertir TypeScript enums en tableaux (ou TypeScript arrays). Dans notre exemple reprenant les jours de la semaine ; le code se présente alors comme suit :

enum JoursDeSemaine {
Lundi = "lun",
Mardi = "mar",
Mercredi = "mer",
Jeudi = "jeu",
Vendredi = "ven",
Samedi = "sam",
Dimanche = "dim"
};
const JoursDeSemaineArray: { label: string; value: string }[] = [];
for (const key in JoursDeSemaine) {
    if (JoursDeSemaine.hasOwnProperty(key)) {
        JoursDeSemaineArray.push({ label: key, value: JoursDeSemaine[key] });
    }
}
console.log(JoursDeSemaineArray);

Nous obtenons le résultat suivant :

[
    { label: 'Lundi', value: 'lun' },
    { label: 'Mardi', value: 'mar' },
    { label: 'Mercredi', value: 'mer' },
    { label: 'Jeudi', value: 'jeu' },
    { label: 'Vendredi', value: 'ven' },
    { label: 'Samedi', value: 'sam' },
    { label: 'Dimanche', value: 'dim' }
]