Союзи і звуження

У реальному світі змінні та відповіді API не завжди мають єдиний фіксований тип. TypeScript пропонує Union Types для обробки змінності та Type Narrowing для безпечної роботи з ними під час виконання.

Типи спілок

Тип об’єднання дозволяє змінній приймати значення різних типів. Це виражається символом вертикальної риски (|):

let result: number | string;
result = 42; // Valid
result = 'Error 404'; // Valid

Однак під час роботи з типом об’єднання ми не можемо напряму викликати методи, які належать лише до одного з типів (наприклад, ми не можемо викликати .toUpperCase(), якщо змінна також може бути number). Спочатку треба «звузити» тип.

Тип Звуження

Звуження типу — це процес, у якому TypeScript аналізує структури потоку керування (наприклад, if або switch), щоб визначити більш конкретний тип для змінної під час виконання.

Існує кілька способів виконання звуження:

1. Оператор typeof

Ідеально підходить для розрізнення примітивних типів:

function printLength(value: string | number) {
  if (typeof value === 'string') {
    // TypeScript knows 'value' is a string here
    console.log(value.length);
  } else {
    // TypeScript knows 'value' is a number here
    console.log(value.toFixed(2));
  }
}

2. Оператор in

Використовується для перевірки наявності певної властивості об’єкта:

interface Fish {
  swim: () => void;
}
interface Bird {
  fly: () => void;
}

function move(animal: Fish | Bird) {
  if ('swim' in animal) {
    animal.swim(); // Narrowing to Fish
  } else {
    animal.fly(); // Narrowing to Bird
  }
}

Дискриміновані профспілки

Шаблон Дискриміновані об’єднання складається зі створення об’єктів, які мають спільну властивість з унікальним літеральним значенням (званим дискримінатором). TypeScript розпізнає цей дискримінатор і автоматично звужує тип у межах умовних блоків.

interface SuccessResponse {
  status: 'success'; // Literal discriminator
  data: string;
}

interface ErrorResponse {
  status: 'error'; // Literal discriminator
  errorMessage: string;
}

type ApiResponse = SuccessResponse | ErrorResponse;

function handleResponse(response: ApiResponse) {
  if (response.status === 'success') {
    console.log('Data received:', response.data);
  } else {
    console.error('An error occurred:', response.errorMessage);
  }
}

Спробуйте самі

Вправа 1: Типи союзів

Вправа 2: Звуження базового типу

Вправа 3: Звуження за допомогою "в"

Вправа 4: Дискримінована форма об’єднання