Союзы и сужение

В реальном мире переменные и ответы API не всегда имеют один фиксированный тип. TypeScript предлагает Объединенные типы для обработки изменчивости и Сужение типов для безопасной работы с ними во время выполнения.

Типы союзов

Тип объединения позволяет переменной принимать значения разных типов. Это выражается с помощью символа вертикальной черты (|):

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: Сужение с помощью «in»

Упражнение 4. Форма распознанного объединения