Объединение литеральных типов (Literal Union Types) — это способ ограничить переменную набором конкретных значений. Вместо того чтобы разрешать любую строку (string), вы можете разрешить, например, только 'start' | 'stop' | 'pause'.
Синтаксис использует оператор вертикальной черты | для перечисления допустимых литералов. Это отлично подходит для описания состояний, режимов работы, вариантов сортировки и конфигурационных настроек. TypeScript будет следить за тем, чтобы вы не присвоили значение, которого нет в списке, и подскажет возможные варианты в редакторе.
Практика включает создание таких типов и их использование в функциях. Вы увидите, как это повышает надежность кода по сравнению с использованием обычных примитивов. Задания помогут вам освоить этот паттерн использования типов.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- String Literal Types.
- Number Literal Types.
- Boolean Literal Types.
- Литеральные Union типы.
- as const утверждение.
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Оператор объединения
В этом задании вы научитесь создавать union-тип из строковых литералов с помощью оператора объединения |. Заполните пропуски, чтобы тип Direction мог принимать только четыре конкретных значения: "up", "down", "left" и "right". Используйте строковые литералы и соединяйте их символом вертикальной черты |. Пропуски расположены так, чтобы вы отработали именно синтаксис объединения литеральных типов в TypeScript.
type Direction = input1S | input2S | input3S | input4S;
// Пример использования — порядок значений здесь подсказывает ожидаемый порядок в типе выше
const move: Direction = "up"; // должно быть разрешено
// Эти строки должны вызывать ошибку компиляции, если тип объявлен верно:
// const wrong: Direction = "forward";
// const wrong2: Direction = 42;2. Валидные значения
Сопоставьте каждое значение из левой колонки с соответствующей категорией в правой колонке: является ли оно валидным значением для типа `Align = 'left' | 'right' | 'center'` или нет. Обратите внимание, что в правой колонке несколько элементов имеют одинаковые подписи, поэтому правильных комбинаций сопоставления несколько.
'left''right''center''top''bottom'3. Светофор
Из предложенных строк соберите корректную TypeScript-программу, которая определяет тип TrafficLight как объединение литеральных строковых значений 'red', 'yellow', 'green', объявляет переменную этого типа, присваивает ей значение 'red' и выводит это значение в консоль. Некоторые строки являются лишними и не должны входить в итоговое решение.
type TrafficLight = 'red' | 'yellow' | 'green';let light: TrafficLight;light = 'red';console.log(light);let light: string;light = 'blue';4. Опечатка в значении
В данном фрагменте TypeScript-кода определена функция, которая принимает параметр строго определённого типа — литерального union-типа. Однако при вызове функции передано значение, которое не соответствует допустимым вариантам из-за опечатки. Найдите строку с ошибкой и исправьте её, чтобы код соответствовал типам и работал без ошибок.
function setTransition(easing: 'ease-in' | 'ease-out') { console.log(`Transition set to ${easing}`);}setTransition('easein');5. Составные части Union
Перед вами фрагмент кода на TypeScript, содержащий определение сложного типа. Внимательно изучите объявление типа `ExtendedColor`. Ваша задача — выделить кликом все строковые литералы, которые непосредственно входят в это объединение (union type). Не отмечайте строковые литералы в других частях кода (например, в вызовах функции) или другие элементы синтаксиса.
// Определение типа для цветов
type ExtendedColor = {{"red"~|~t1}} | {{"green"~|~t2}} | {{"blue"~|~t3}} | {{"yellow"~|~t4}} | {{"cyan"~|~t5}} | {{"magenta"~|~t6}};
// Функция для установки цвета
function setColor(color: ExtendedColor): void {
console.log(`Цвет установлен: ${color}`);
}
// Примеры вызова
setColor({{"red"~|~t7}});
setColor({{"yellow"~|~t8}});
// setColor("black"); // Ошибка: "black" не допустим6. Аргументы функции
В этом задании вам предстоит заполнить пропуски в коде TypeScript, чтобы корректно вызвать функцию настройки стиля. Функция принимает два аргумента: цвет (литеральный тип 'red' | 'blue') и размер (литеральный тип 'small' | 'large'). Используя выпадающие списки, выберите допустимые комбинации литералов, которые соответствуют объявленным типам. Обратите внимание, что аргументы должны быть именно строковыми литералами, а не произвольными строками.
type Color = 'red' | 'blue';
type Size = 'small' | 'large';
function setStyle(color: Color, size: Size): void {
console.log(`Style: color=${color}, size=${size}`);
}
// Вызов функции с допустимыми аргументами
setStyle(input1S, input2S);7. От типа к использованию
Перед вами строки TypeScript-кода, связанные с использованием литеральных union-типов. Они перемешаны. Расставьте строки в правильном порядке, чтобы получилась корректная программа: сначала объявление литерального union-типа, затем объявление функции, принимающей этот тип, и, наконец, вызов функции с корректным литеральным значением. Программа должна компилироваться без ошибок и выводить сообщение в консоль.
function move(direction: Direction) {} console.log(`Moving to ${direction}`);move("north");type Direction = "north" | "south" | "east" | "west";