TypeScriptУрок 13 из 16

Размеченные объединения

Размеченное объединение — несколько объектных типов с общим полем-меткой, например kind или status. По метке TypeScript понимает, какие ещё поля есть у объекта.

Главное

Метка — литеральное поле, разное у каждого варианта: kind: "circle".
switch по метке сужает объект в каждом case.
В default присвойте значение переменной типа never — это проверка полноты.
Добавили новый вариант и забыли case — компилятор покажет ошибку.

Пример

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

В case "circle" доступен radius, в case "square" — side. Если дописать в Shape треугольник, строка с never сразу станет красной.

Задание

Как пользоваться редактором⌘ Enter или Ctrl Enter — запустить код, ⇧ ⌘ Enter — проверить задание.Tab и Shift Tab сдвигают строку или выделение; Esc, затем Tab — выйти из редактора.Проверка сравнивает то, что напечатала программа, с заданием; пробелы в конце строк не важны.После двух неудачных проверок можно открыть решение. Ваш код сохраняется в этом браузере.

Добавьте в RequestState вариант error с полем message, обработайте его в render, допишите default с проверкой never и положите состояние ошибки в массив. Последняя строка вывода — «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));
}

Вывод

Здесь появится то, что напечатает программа.