enum vs union
enum crée un ensemble de constantes, visible aussi à l’exécution comme un objet, alors qu’une union de littéraux n’est qu’un type, plus léger et sans code JavaScript.
Comparaison point par point
#Existe dans le programme en cours d’exécution (JavaScript)
- enum
- Oui, comme un objet
- Unia (A | B)
- Non, seulement pendant la compilation
Écriture d’une valeur
- enum
- Par le nom du membre, par ex.
Difficulty.Hard - Unia (A | B)
- Directement le littéral, par ex.
"hard"
Ajoute du code au paquet
- enum
- Oui
- Unia (A | B)
- Non
Parcourir les variantes à l’exécution
- enum
- Oui, par ex.
Object.values() - Unia (A | B)
- Non, un tableau séparé est nécessaire
Combinaison avec d’autres types (union, intersection)
- enum
- Limitée
- Unia (A | B)
- Naturelle, c’est déjà une union
Usage typique
- enum
- Quand un objet est aussi nécessaire à l’exécution
- Unia (A | B)
- Données d’API, props en JSX, la plupart du code récent
Exemple
#enum StatusEnum {
Draft = 'draft',
Published = 'published'
}
type StatusUnion = 'draft' | 'published'
const fromEnum: StatusEnum = StatusEnum.Published
const fromUnion: StatusUnion = 'published'
console.log(fromEnum, fromUnion, fromEnum === fromUnion)published published true
Définition et utilisation
#Les deux constructions limitent une variable à l’une de plusieurs variantes autorisées, et les deux fonctionnent bien pour un statut, un niveau de difficulté ou un rôle d’utilisateur. Le compilateur signale une erreur dans les deux cas si vous assignez une valeur hors de l’ensemble.
Elles diffèrent par ce qui existe après la compilation. enum génère un véritable objet JavaScript, que vous référencez par son nom (Difficulty.Hard), et dont vous pouvez parcourir les valeurs à l’exécution, par ex. avec Object.values(). Une union de littéraux ("easy" | "hard") n’existe que pendant la compilation et disparaît sans laisser de trace. Au lieu du nom d’un membre, vous écrivez directement la valeur, c’est-à-dire le littéral lui-même.
Quand vous avez aussi besoin d’un objet dans le programme en cours d’exécution, par exemple pour parcourir les variantes ou pour faire correspondre un numéro à un nom, enum peut être pratique. Dans la majorité du code récent, surtout avec des données venant d’une API et en JSX, l’union de littéraux est plus simple et plus légère, car elle n’ajoute aucun code au paquet final.
Syntaxe
#enum Name {
Member = "value"
}
type Name = "value1" | "value2"Plus d’exemples
#enum Difficulty {
Easy = 'easy',
Hard = 'hard'
}
console.log(Object.values(Difficulty))
console.log(typeof Difficulty)['easy', 'hard'] object
type Rank = 'bronze' | 'gold'
const current: Rank = 'gold'
console.log(current)
console.log(typeof Rank)gold undefined
Rank n’est ici qu’un type, donc il n’existe pas comme variable après la compilation. typeof sur un nom inexistant ne lève pas d’erreur, il renvoie simplement "undefined".
Bonnes pratiques
#- Si les données viennent d’une API sous forme de chaînes, un enum de chaînes et une union de littéraux sont presque équivalents. Choisissez l’union, sauf si vous avez besoin d’un objet à parcourir.
- Un enum numérique (
enum Status { Draft, Published }) peut tromper dans les logs, car il affiche un nombre, pas un nom. Un enum textuel ou une union sont plus lisibles. - Le motif
as constassocié àtypeofdonne un effet proche d’un enum : une liste de valeurs pour une boucle et un type union à partir d’une seule constante.
Entrées associées
#Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.