TypeScriptLección 13 de 16

Uniones discriminadas

Una unión discriminada es un conjunto de tipos de objeto con un campo etiqueta común, como kind o status. Por la etiqueta, TypeScript sabe qué otros campos tiene el objeto.

Lo esencial

La etiqueta es un campo literal distinto en cada miembro: kind: "circle".
Un switch sobre la etiqueta estrecha el objeto en cada case.
En default asigna el valor a una variable de tipo never: es la comprobación exhaustiva.
Si añades un miembro nuevo y olvidas su case, el compilador muestra un error.

Ejemplo

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));

En case "circle" está disponible radius y en case "square", side. Si añades un triángulo a Shape, la línea con never se pone en rojo al instante.

Tarea

Cómo usar el editor⌘ Enter o Ctrl Enter ejecuta el código, ⇧ ⌘ Enter comprueba la tarea.Tab y Mayús Tab sangran la línea o la selección; Esc y luego Tab sale del editor.La comprobación compara lo que imprimió el programa con la tarea; los espacios al final de línea no cuentan.Tras dos comprobaciones fallidas puedes ver la solución. Tu código se guarda en este navegador.

Añade a RequestState un miembro error con el campo message, trátalo en render, escribe un default con never y mete el estado de error en el array. La última línea de salida es «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));
}

Salida

Aquí aparecerá lo que imprima el programa.