TypeScriptLeçon 7 sur 16

Types littéraux et affinement

Un type littéral est une valeur précise, comme "red". Une union de littéraux devient une courte liste d'options autorisées.

L’essentiel

type Size = "S" | "M" | "L" : le compilateur refuse une faute de frappe comme "XL".
Affinement : après un test === ou typeof, TypeScript précise le type dans cette branche.
Un switch sur des littéraux affine le type dans chaque case.
Quand toutes les options sont traitées, aucun return n'est nécessaire après le switch.

Exemple

type Size = "S" | "M" | "L"; function cupPrice(size: Size): number {  if (size === "S") return 2;  if (size === "M") return 3;  return 4; // only "L" is left here} const order: Size = "M";// const wrong: Size = "XL"; // error: "XL" is not assignable to type Size function describe(value: string | number | null): string {  if (value === null) return "empty";  if (typeof value === "number") return `number ${value.toFixed(1)}`;  return `text ${value.toUpperCase()}`;} console.log(`Cup ${order}: ${cupPrice(order)}`);console.log(describe(null));console.log(describe(2));console.log(describe("hi"));

Dans cupPrice, il ne reste que "L" après les deux if. Dans describe, chaque test retire une option : d'abord null, puis number, et il reste string.

Exercice

Utiliser l’éditeur⌘ Entrée ou Ctrl Entrée lance le code, ⇧ ⌘ Entrée vérifie l’exercice.Tab et Maj Tab indentent la ligne ou la sélection ; Échap puis Tab quitte l’éditeur.La vérification compare ce que le programme a affiché à l’exercice ; les espaces en fin de ligne ne comptent pas.Après deux vérifications ratées, la solution s’ouvre. Votre code reste dans ce navigateur.

Limitez Light à trois couleurs et écrivez next avec un switch : red → green → yellow → red. Le programme affiche « 1: red », « 2: green », « 3: yellow », « 4: red ».

// TODO: allow only "red", "yellow" or "green"type Light = string; function next(light: Light): Light {  // TODO: use switch: red -> green -> yellow -> red  return light;} let light: Light = "red";for (let step = 1; step <= 4; step++) {  console.log(`${step}: ${light}`);  light = next(light);}

// TODO: allow only "red", "yellow" or "green"
type Light = string;

function next(light: Light): Light {
  // TODO: use switch: red -> green -> yellow -> red
  return light;
}

let light: Light = "red";
for (let step = 1; step <= 4; step++) {
  console.log(`${step}: ${light}`);
  light = next(light);
}

Sortie

Ce que le programme affiche apparaîtra ici.