Объединение литералов в объединения
Создавайте конечные наборы значений, объединяя литеральные типы
«Объединение литералов в объединения» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.
Объединения литеральных типов
Объединение литералов описывает значение, которое должно в точности соответствовать одному из нескольких известных вариантов. Это основа машин состояний (state), перечислений и типизированных программных интерфейсов.
type Status = 'idle' | 'loading' | 'success' | 'error';
let state: Status = 'idle';
state = 'loading';
console.log('State:', state);Переключение по объединению литералов
Конструкция switch для объединения литералов легко читается, а компилятор знает, что каждый вариант соответствует одному из разрешённых значений. Это идеально сочетается с проверками полноты обработки.
type Status = 'idle' | 'loading' | 'done';
function label(s: Status): string {
switch (s) {
case 'idle': return 'Waiting';
case 'loading': return 'Working';
case 'done': return 'Finished';
}
}
console.log(label('loading'));Полная обработка вариантов
Обработка каждого элемента объединения называется полной обработкой. Если охвачены все варианты, TypeScript может доказать, что функция всегда возвращает результат и ни одна ветвь не пропущена.
type Dir = 'left' | 'right';
function step(d: Dir): number {
if (d === 'left') return -1;
return 1; // only 'right' remains
}
console.log(step('left'), step('right'));Приём с пустым типом для проверки полноты
Присваивание значения типу never в ветви по умолчанию приводит к ошибке компиляции, если Вы добавите новый элемент объединения, но забудете обработать его. Это страховочная сетка для развивающегося кода.
type Shape = 'circle' | 'square';
function area(s: Shape): string {
switch (s) {
case 'circle': return 'pi r^2';
case 'square': return 'a^2';
default:
const _exhaustive: never = s;
return _exhaustive;
}
}
console.log(area('circle'));Вывод объединений из константных объектов
Распространённый приём — хранить значения в константном объекте и выводить объединение из его значений с помощью typeof obj[keyof typeof obj]. Один источник истины — два результата.
const Colors = { Red: 'red', Blue: 'blue' } as const;
type Color = typeof Colors[keyof typeof Colors];
// 'red' | 'blue'
const c: Color = Colors.Blue;
console.log(c);Вывод объединений из ключей
Также можно вывести объединение ключей с помощью keyof typeof obj. Это полезно, когда сами ключи являются значимыми идентификаторами.
const ICONS = { home: 0, search: 1, profile: 2 } as const;
type IconName = keyof typeof ICONS;
// 'home' | 'search' | 'profile'
const name: IconName = 'search';
console.log(name, ICONS[name]);Дискриминируемые объединения с literal-метками
Добавьте свойство метка с literal-значением к каждому варианту объекта, и TypeScript сможет различать их. Проверка метки сужает тип до точной формы.
type Action =
| { type: 'add'; amount: number }
| { type: 'reset' };
function reduce(a: Action): number {
if (a.type === 'add') return a.amount;
return 0;
}
console.log(reduce({ type: 'add', amount: 5 }));Сужение по дискриминатору
После проверки literal-дискриминатора компилятор знает, какой именно вариант у Вас есть, поэтому его уникальные поля становятся безопасно доступными без приведений типов.
type Event =
| { kind: 'click'; x: number; y: number }
| { kind: 'key'; code: string };
function handle(e: Event): string {
if (e.kind === 'key') return 'Key ' + e.code;
return 'Click ' + e.x + ',' + e.y;
}
console.log(handle({ kind: 'key', code: 'Esc' }));Объединение нескольких объединений
Можно составлять большие объединения из небольших именованных объединений. Это позволяет группировать связанные варианты и повторно использовать их в кодовой базе.
type Primary = 'red' | 'blue' | 'yellow';
type Secondary = 'green' | 'orange';
type Color = Primary | Secondary;
const c: Color = 'green';
console.log(c);Объединения как ограничения для функций
Передача literal-объединения в функцию ограничивает вызывающий код допустимыми вариантами и предоставляет автодополнение в редакторе. Сочетание безопасности и удобства обнаружения вариантов трудно превзойти.
type Align = 'left' | 'center' | 'right';
function setAlign(a: Align): void {
console.log('Aligned', a);
}
setAlign('center');
// setAlign('top'); // ErrorПочему literal-объединения лучше строк
Параметр обычного типа string принимает любое значение, включая опечатки. Literal-объединение обнаруживает ошибки во время компиляции и документирует допустимые варианты — это заметное улучшение для кода, который легко поддерживать.
type Method = 'GET' | 'POST' | 'PUT' | 'DELETE';
function request(m: Method, url: string): void {
console.log(m, url);
}
request('POST', '/api/users');Быстрая проверка
Проверьте, насколько хорошо Вы поняли literal-объединения.
Повторение: объединение литералов
Вы научились:
- создавать объединения литералов для конечных наборов вариантов;
- обрабатывать их полностью, используя приём с
neverдля безопасности; - выводить объединения из константных объектов с помощью
keyof typeofиtypeof obj[keyof typeof obj]; - различать варианты с помощью свойств literal-меток.
Следующий курс посвящён специальным типам unknown, never и void.
const ROUTES = { home: '/', about: '/about' } as const;
type Route = typeof ROUTES[keyof typeof ROUTES];
const r: Route = '/about';
console.log(r);
Изучай TypeScript с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 101
- Уроки
- 352
Часто задаваемые вопросы
Урок «Объединение литералов в объединения» бесплатный?
Да — полный текст урока «Объединение литералов в объединения» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.
Чему я научусь в уроке «Объединение литералов в объединения»?
Создавайте конечные наборы значений, объединяя литеральные типы Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать TypeScript Academy?
Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Объединение литералов в объединения»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке TypeScript Academy?
Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Литеральные типы строк и чисел
- Логические литералы и вывод литеральных типов
- Утверждения const с помощью as const
- Объединение литералов в объединения