TypeScriptLeçon 13 sur 16

Unions discriminées

Une union discriminée regroupe des types objets qui partagent un champ étiquette, comme kind ou status. Grâce à l'étiquette, TypeScript sait quels autres champs l'objet possède.

L’essentiel

L'étiquette est un champ littéral différent pour chaque membre : kind: "circle".
Un switch sur l'étiquette affine l'objet dans chaque case.
Dans default, affectez la valeur à une variable never : c'est le contrôle d'exhaustivité.
Ajoutez un membre et oubliez son case : le compilateur signale une erreur.

Exemple

type Shape =  | { kind: "circle"; radius: number }  | { kind: "square"; side: number }; function area(shape: Shape): number {  switch (shape.kind) {    case "circle":      return Math.PI * shape.radius ** 2; // shape is the circle here    case "square":      return shape.side ** 2; // and the square here    default: {      // if a new kind is added to Shape and not handled, this line turns red      const unreachable: never = shape;      return unreachable;    }  }} console.log(area({ kind: "square", side: 3 }));console.log(area({ kind: "circle", radius: 1 }).toFixed(2));

radius est disponible dans case "circle", side dans case "square". Ajoutez un triangle à Shape et la ligne never devient rouge aussitôt.

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.

Ajoutez à RequestState un membre error avec un champ message, traitez-le dans render, écrivez un default avec never et placez l'état d'erreur dans le tableau. La dernière ligne affichée est « Error: Not found ».

// TODO: add a third variant: { status: "error"; message: string }type RequestState =  | { status: "loading" }  | { status: "success"; data: string[] }; function render(state: RequestState): string {  switch (state.status) {    case "loading":      return "Loading...";    case "success":      return `Loaded ${state.data.length}: ${state.data.join(", ")}`;    // TODO: handle "error" -> "Error: <message>"    // and add a default branch with a never check  }} const states: RequestState[] = [  { status: "loading" },  { status: "success", data: ["Ann", "Bo"] },  // TODO: add { status: "error", message: "Not found" }]; for (const state of states) {  console.log(render(state));}

// TODO: add a third variant: { status: "error"; message: string }
type RequestState =
  | { status: "loading" }
  | { status: "success"; data: string[] };

function render(state: RequestState): string {
  switch (state.status) {
    case "loading":
      return "Loading...";
    case "success":
      return `Loaded ${state.data.length}: ${state.data.join(", ")}`;
    // TODO: handle "error" -> "Error: <message>"
    // and add a default branch with a never check
  }
}

const states: RequestState[] = [
  { status: "loading" },
  { status: "success", data: ["Ann", "Bo"] },
  // TODO: add { status: "error", message: "Not found" }
];

for (const state of states) {
  console.log(render(state));
}

Sortie

Ce que le programme affiche apparaîtra ici.