Maîtriser les énumérations dans TypeScript : un guide sur la façon de travailler avec

TypeScript est un sur-ensemble de JavaScript qui vous aide à écrire du code sécurisé.

Avec TypeScript, vous pourrez détecter les bugs plus tôt et les corriger. L'une des fonctionnalités importantes de TypeScript est Enums. Un Enum est une construction populaire dans TypeScript qui vous aide à écrire du code plus sûr.

Dans cet article, j'expliquerai les énumérations, comment les créer et les utiliser, et bien d'autres éléments à prendre en compte.

What is an Enum?

Enum est l'abréviation de type énuméré. Un type de données énuméré est défini par les différentes valeurs qu'une variable de ce type peut prendre. Les différentes valeurs qu'il pourrait prendre sont souvent appelées membres ou éléments.

Dans cet article, nous les appellerons membres. Les énumérations ne sont pas seulement une fonctionnalité TypeScript. Au contraire, les types énumérés sont également présents et utilisés dans d'autres langages de programmation. L'utilisation d'énumérations permet une meilleure sécurité des types dans les programmes TypeScript.

A lire également: Principales bibliothèques TypeScript et runtime à connaître en tant que développeur

Why Use Enums?

Les énumérations vous aident à spécifier les valeurs qu'une variable peut contenir. Ils vous aident également à spécifier les valeurs qu'un argument de fonction peut prendre. Cela permet de garantir que les développeurs fournissent toujours les valeurs attendues aux variables et aux arguments de fonction. Cela aidera à éliminer les bogues et vous aidera à écrire un code plus sûr et plus robuste.

Prerequisites to Work With Enums

Dans ce didacticiel, je vais montrer comment travailler avec des énumérations dans TypeScript. Pour suivre ce didacticiel, vous devez être capable d'exécuter et d'exécuter du code TypeScript.

Par conséquent, vous devez installer NodeJs pour exécuter votre code JavaScript. Si TypeScript n'est pas installé sur votre ordinateur, la vidéo ci-dessous est un guide sur la façon de procéder.

Alternativement, si vous souhaitez compiler et exécuter un script immédiatement, utilisez ts-node. Bien que ce soit ce que je ferai dans cet article, pour les projets plus importants, je recommanderais d'installer TypeScript. Pour exécuter un script à l'aide de ts-node, vous utilisez la commande suivante :

npx ts-node <scriptname>

Cet article suppose également que vous connaissez JavaScript et TypeScript de base.

Working With a Simple Enum

Comment créer une énumération simple

Les énumérations dans TypeScript sont créées à l'aide du mot-clé enum. Le nom de l'énumération suit, suivi d'une liste des membres détenus par l'énumération. Voici un exemple où nous déclarons une énumération pour les quatre points cardinaux de la boussole.

enum Direction {
    North,
    East,
    South,
    West
}

Notez qu'il n'y a pas de guillemets autour des membres dans l'énumération – ce ne sont pas des chaînes.

Comment utiliser une énumération simple

Vous attribuez une valeur énumérée à une variable comme suit :

const heading: Direction = Direction.North;

Parce que nous attribuons la variable lors de la déclaration, TypeScript peut déduire le type de données. Par conséquent, nous n’avons pas besoin d’affirmer le type. Au lieu de cela, nous pouvons écrire ceci :

const heading = Direction.North;

Pour trouver la valeur de la variable d'en-tête, nous pouvons la console.log.

console.log(heading);

Le résultat de ceci sera :

0

La variable de titre contient la valeur zéro même si nous avons attribué la valeur de Direction.North à cela. En effet, chaque membre se voit attribuer une valeur numérique lors de la création des énumérations. Le premier membre reçoit la valeur 0, le deuxième la valeur 1, et ainsi de suite. Voici une démonstration :

console.log(Direction.North, Direction.East, Direction.South, Direction.West)

Par conséquent, vous pouvez vérifier si la variable de cap contient le Nord en affirmant qu'elle est égale à zéro. Par exemple:

// Asserting equality
let isNorth = heading == 0;

// Printing the result
console.log(isNorth);

Comme démontré précédemment, Direction.North est égal à 0. Ainsi, au lieu de vérifier si heading est égal à zéro, on peut vérifier s'il est égal à Direction.North.

// Checking if direction is North
isNorth = heading == Direction.North;

// Printing the result
console.log(isNorth);

Tout cela est utile ; il y a de fortes chances que c'est ainsi que vous utiliserez les valeurs énumérées. Cependant, vous pouvez faire plus, comme vous le verrez plus tard. Cette section suivante explique comment vous pouvez travailler avec des valeurs personnalisées.

Working With Custom Values

Lorsque vous créez une énumération, TypeScript attribue automatiquement des valeurs numériques aux membres en partant de zéro. Cependant, vous souhaiterez peut-être que vos membres aient des valeurs personnalisées au lieu de celles par défaut, auquel cas vous pouvez les attribuer. Ainsi:

enum StarRating {
    VeryPoor = 1,
    Poor = 2,
    Average = 3,
    Good = 4,
    Excellent = 5
}

Vous pouvez également effectuer les opérations suivantes:

enum StarRating {
    VeryPoor = 1,
    Poor,
    Average,
    Good,
    Excellent
}

Dans ce cas, le premier membre se verra attribuer la valeur 1. Les choix suivants seront auto-incrémentés par rapport au choix précédent. Ainsi, Mauvais aura une note de 2, une moyenne de 3, et ainsi de suite.

Les choix dans une énumération n'ont pas toujours de valeurs numériques, comme vous le verrez plus tard. Cependant, ceux ayant des valeurs numériques se comporteront comme des nombres normaux.

console.log(typeof StarRating.Average);

Cela imprimera "number". Cela signifie que vous pouvez effectuer toutes les tâches numériques, y compris faire des comparaisons telles que :

console.log(StarRating.Excellent > StarRating.Average)

Cela imprimera "true".

Utiliser des chaînes comme valeurs personnalisées

Comme mentionné précédemment, les choix d'énumération peuvent avoir des valeurs de chaîne au lieu de simples nombres. Voici comment procéder :

enum Choice {
    RedPill = "Know Everything"
    BluePill = "Know Nothing"
}

Dans ce cas, les choix d'énumération se comporteront comme les précédents. Cependant, comme les valeurs sont des chaînes, vous pouvez effectuer des opérations sur les chaînes, et non sur les nombres, comme dans l'exemple précédent.

Énumérations hétérogènes

Vous pouvez également mélanger des valeurs de chaîne et des valeurs numériques. Ceci est déconseillé et peu utile, mais néanmoins possible.

enum Mixed {
    First = "String"
    Second = 2
}

Mot de la fin

Dans cet article, nous avons expliqué ce que sont les énumérations dans TypeScript et pourquoi elles sont importantes. De plus, nous avons abordé les différents types de valeurs que les membres d’Enum peuvent avoir.

Ensuite, consultez notre article sur Type vs interface dans TypeScript.