Union с примитивами

export type Id = string | number;

export const a: Id = "abc-123";
export const b: Id = 42;

Разметка здесь уже верная: Id допускает значение либо строкового, либо числового типа, и обе константы подходят. Всё интересное в этом задании начинается за пределами самих строк кода.

Что не проходит

const c: Id = true;  // Type 'boolean' is not assignable to type 'string | number'
const d: Id = null;  // тоже ошибка при включённом strictNullChecks

Union это закрытый список: всё, что в нём не перечислено, отвергается.

Почему a.toUpperCase() подчёркивается

a.toUpperCase(); // Property 'toUpperCase' does not exist on type 'string | number'

Хотя в a лежит строка, тип переменной объявлен как Id, и компилятор работает с типом, а не со значением. Для значения типа string | number доступно только пересечение возможностей обоих вариантов, а toUpperCase есть лишь у одного из них.

Отсюда правило, которое стоит запомнить: union ограничивает то, что можно делать со значением, пока вариант не уточнён. Уточнение называется сужением типа:

if (typeof a === "string") {
  a.toUpperCase(); // здесь тип уже string, метод доступен
}

Этому посвящено задание 21.

Где такой union встречается на практике

• идентификаторы, которые приходят и числом, и строкой;
• значения из форм, где число введено текстом;
• результаты парсинга, где поле может быть пустым (string | null).

Во всех случаях union честнее, чем any: он описывает реальность и при этом заставляет обработать каждый вариант.