Combiner des littéraux en unions
Créer des ensembles finis de valeurs en réunissant des types littéraux.
Combiner des littéraux en unions est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.
Unions de types littéraux
Une union de littéraux modélise une valeur qui doit être exactement l'une de plusieurs options connues. Elle constitue la base des machines à états, des énumérations et des API correctement typées.
type Status = 'idle' | 'loading' | 'success' | 'error';
let state: Status = 'idle';
state = 'loading';
console.log('State:', state);Effectuer un switch sur une union littérale
Un switch portant sur une union littérale est lisible, et le compilateur sait que chaque cas correspond à l'une des valeurs autorisées. Cela s'associe parfaitement aux vérifications d'exhaustivité.
type Status = 'idle' | 'loading' | 'done';
function label(s: Status): string {
switch (s) {
case 'idle': return 'Waiting';
case 'loading': return 'Working';
case 'done': return 'Finished';
}
}
console.log(label('loading'));Traitement exhaustif
Traiter chaque membre d'une union s'appelle un traitement exhaustif. Lorsque vous couvrez tous les cas, TypeScript peut prouver que la fonction renvoie toujours une valeur, sans branche manquante.
type Dir = 'left' | 'right';
function step(d: Dir): number {
if (d === 'left') return -1;
return 1; // only 'right' remains
}
console.log(step('left'), step('right'));L'astuce d'exhaustivité avec never
Affecter la valeur à un never dans la branche par défaut force une erreur de compilation si vous ajoutez un nouveau membre à l'union sans le traiter. C'est un filet de sécurité pour le code qui évolue.
type Shape = 'circle' | 'square';
function area(s: Shape): string {
switch (s) {
case 'circle': return 'pi r^2';
case 'square': return 'a^2';
default:
const _exhaustive: never = s;
return _exhaustive;
}
}
console.log(area('circle'));Dériver des unions à partir d'objets const
Un modèle courant consiste à conserver les valeurs dans un objet const et à dériver l'union à partir de ses valeurs avec typeof obj[keyof typeof obj]. Une source unique de vérité, deux résultats.
const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);Dériver des unions à partir des clés
Vous pouvez également dériver une union des clés avec keyof typeof obj. C'est utile lorsque les clés elles-mêmes sont les identifiants significatifs.
const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);Unions discriminées avec des étiquettes littérales
Ajoutez une propriété littérale d'étiquette à chaque variante d'objet, et TypeScript pourra les distinguer. La vérification de l'étiquette réduit le type à la structure exacte.
type Action =
| { type: 'add'; amount: number }
| { type: 'reset' };
function reduce(a: Action): number {
if (a.type === 'add') return a.amount;
return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));Réduire le type grâce au discriminant
Une fois que vous avez testé le discriminant littéral, le compilateur sait quelle variante vous possédez ; ses champs spécifiques deviennent donc accessibles en toute sécurité, sans conversions de type.
type Event =
| { kind: 'click'; x: number; y: number }
| { kind: 'key'; code: string };
function handle(e: Event): string {
if (e.kind === 'key') return 'Key ' + e.code;
return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));Combiner plusieurs unions
Vous pouvez composer de grandes unions à partir d'unions nommées plus petites. Cela permet de regrouper les options associées et de les réutiliser dans toute votre base de code.
type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;
const c: Color = 'green';
console.log(c);Les unions comme contraintes de fonctions
Passer une union littérale à une fonction limite les appels aux options valides et fournit la complétion automatique de l'éditeur. Cette combinaison de sécurité et de facilité de découverte est difficile à égaler.
type Align = 'left' | 'center' | 'right';
function setAlign(a: Align): void {
console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // ErrorPourquoi les unions littérales sont préférables aux chaînes
Un paramètre string ordinaire accepte n'importe quelle valeur, y compris les fautes de frappe. Une union littérale détecte les erreurs lors de la compilation et documente les choix valides : une amélioration évidente pour un code facile à maintenir.
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
function request(m: Method, url: string): void {
console.log(m, url);
}
request('POST', '/api/users');Vérification rapide
Évaluez votre compréhension des unions littérales.
Récapitulatif : combiner les littéraux
Vous avez appris à :
- construire des unions de littéraux pour des ensembles finis d'options ;
- les traiter de manière exhaustive, en utilisant l'astuce de
neverpour garantir la sécurité ; - dériver des unions à partir d'objets const via
keyof typeofettypeof obj[keyof typeof obj]; - distinguer les variantes grâce à des propriétés d'étiquette littérales.
Prochain cours : les types spéciaux unknown, never et void.
const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);Questions Fréquemment Posées
La leçon « Combiner des littéraux en unions » est-elle gratuite ?
Oui — le texte complet de « Combiner des littéraux en unions » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Combiner des littéraux en unions » ?
Créer des ensembles finis de valeurs en réunissant des types littéraux. Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer TypeScript Academy ?
Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Combiner des littéraux en unions » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?
Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Types littéraux de chaînes et de nombres
- Littéraux booléens et inférence des littéraux
- Assertions const avec as const
- Combiner des littéraux en unions