Restreindre selon le discriminant
Laisser TypeScript restreindre les variantes dans les instructions switch.
Restreindre selon le discriminant est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Affiner selon le discriminant
Une fois le discriminant vérifié, TypeScript affine l'union pour ne conserver que le membre correspondant et rend accessibles ses champs spécifiques. C'est tout l'intérêt de ce modèle.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape) {
if (s.kind === "circle") return Math.PI * s.radius ** 2;
return s.side ** 2;
}
console.log(area({ kind: "circle", radius: 2 }).toFixed(2));Sélectionner selon le discriminant
Une instruction switch sur le discriminant est la manière la plus claire de traiter chaque variante. Dans chaque case, le type est automatiquement affiné.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
switch (s.kind) {
case "circle": return Math.PI * s.radius ** 2;
case "square": return s.side ** 2;
}
}
console.log(area({ kind: "square", side: 5 }));Champs propres à chaque membre selon le cas
Dans le cas "circle", s.radius est disponible, mais s.side ne l'est pas. TypeScript sait exactement dans quel membre vous vous trouvez.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function describe(s: Shape) {
switch (s.kind) {
case "circle": return "r=" + s.radius;
case "square": return "side=" + s.side;
}
}
console.log(describe({ kind: "circle", radius: 9 }));Affinement avec une condition
Vous n'avez pas besoin d'utiliser une instruction switch. Une simple comparaison du discriminant dans une condition if produit un affinement tout aussi efficace.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function perimeter(s: Shape): number {
if (s.kind === "circle") {
return 2 * Math.PI * s.radius;
}
return 4 * s.side;
}
console.log(perimeter({ kind: "square", side: 3 }));Accéder au mauvais champ échoue
Avant l'affinement, vous ne pouvez pas accéder à un champ propre à un membre. TypeScript signale une erreur, car la propriété n'existe pas dans tous les membres.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function broken(s: Shape) {
// Error: radius does not exist on Square
// return s.radius;
return s.kind;
}
console.log(broken({ kind: "square", side: 1 }));Affiner avec des discriminants booléens
Pour une union { ok: true } | { ok: false }, la vérification if (r.ok) affine le type vers le membre correspondant à la réussite.
type Result =
| { ok: true; data: string }
| { ok: false; error: string };
function handle(r: Result): string {
if (r.ok) return "Data: " + r.data;
return "Error: " + r.error;
}
console.log(handle({ ok: false, error: "boom" }));Affinement par retour anticipé
Retourner rapidement pour une variante affine le code restant vers les autres variantes. C'est une manière claire de traiter les cas un par un.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function label(s: Shape): string {
if (s.kind === "circle") return "circle";
// s is now narrowed to Square here
return "square with side " + s.side;
}
console.log(label({ kind: "square", side: 8 }));Combiner avec d'autres conditions
Vous pouvez combiner la vérification du discriminant avec d'autres traitements. TypeScript conserve l'affinement tant que la condition du discriminant est vraie dans cette branche.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function bigCircle(s: Shape): boolean {
return s.kind === "circle" && s.radius > 100;
}
console.log(bigCircle({ kind: "circle", radius: 150 }));Affinement dans les filtres de tableaux
L'affinement fonctionne également dans les fonctions de rappel. Ici, chaque forme est vérifiée individuellement pendant le parcours.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const shapes: Shape[] = [
{ kind: "circle", radius: 1 },
{ kind: "square", side: 2 }
];
shapes.forEach(s => {
if (s.kind === "circle") console.log("c", s.radius);
else console.log("s", s.side);
});Les retours d'une sélection restent sûrs du point de vue des types
Lorsqu'une instruction switch traite chaque cas et renvoie une valeur, TypeScript déduit un type de retour précis à partir de l'union de tous les résultats des cas.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function tag(s: Shape) {
switch (s.kind) {
case "circle": return s.radius;
case "square": return s.side;
}
}
console.log(tag({ kind: "circle", radius: 4 }));Réunir les techniques d'affinement
Que vous utilisiez switch ou if, c'est la vérification du discriminant qui permet d'accéder en toute sécurité aux champs des membres. Nous allons ensuite garantir que chaque cas est traité.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
function area(s: Shape): number {
return s.kind === "circle" ? Math.PI * s.radius ** 2 : s.side ** 2;
}
console.log(Math.round(area({ kind: "circle", radius: 10 })));Vérification rapide : affinement
Vérifiez votre compréhension de l'affinement selon le discriminant.
Récapitulatif : affiner selon le discriminant
Vous avez vu que vérifier le discriminant avec switch ou if affine l'union vers un seul membre et rend accessibles uniquement les champs de ce membre. Les retours anticipés et les conditions combinées préservent également l'affinement.
type Shape =
| { kind: "circle"; radius: number }
| { kind: "square"; side: number };
const s: Shape = { kind: "square", side: 7 };
console.log(s.kind === "square" ? s.side : 0);Questions Fréquemment Posées
La leçon « Restreindre selon le discriminant » est-elle gratuite ?
Oui — le texte complet de « Restreindre selon le discriminant » 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 « Restreindre selon le discriminant » ?
Laisser TypeScript restreindre les variantes dans les instructions switch. 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 2 sur 4.
Combien de temps prend la leçon « Restreindre selon le discriminant » ?
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
- Construire des unions discriminées
- Restreindre selon le discriminant
- Vérifier l’exhaustivité avec never
- Modéliser des machines à états