В TypeScript тип string позволяет хранить любую строку. Но что, если переменная должна принимать только ограниченный набор значений, например, только 'up', 'down', 'left' или 'right'? Здесь на помощь приходят String Literal Types.
Синтаксис позволяет определить тип как конкретную строку: type Direction = 'up' | 'down';. Теперь, если вы попытаетесь присвоить такой переменной значение 'diagonal', онлайн компилятор выдаст ошибку. Это работает как строгий список допустимых значений (enum), но без дополнительного синтаксиса перечислений.
Такой подход незаменим при настройке конфигураций, обработке событий и описании состояний интерфейса. В этих задачах вы научитесь создавать литеральные типы, объединять их через оператор | и применять для валидации входных данных функций.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 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. Объявление литерального типа
В этом задании вам предстоит объявить строковый литеральный тип в TypeScript. Строковые литеральные типы позволяют задать точное значение строки, которое может принять переменная. Объявите тип с именем Status, который может быть только одним из двух значений: 'success' или 'error'. В первом пропуске введите строковый литерал 'success', во втором - 'error'. Обратите внимание, что строковые литералы должны быть заключены в кавычки (одинарные или двойные). После правильного заполнения пропусков код будет корректно объявлять тип Status, который можно использовать для переменных, принимающих только указанные значения.
// Объявите тип Status, который может быть только 'success' или 'error'
type Status = input1S | input2S;2. Валидация значений
Перед вами список строковых значений. Разнесите их по двум категориям: Valid (значения, которые соответствуют строковому литеральному типу `type Easing = 'ease-in' | 'ease-out'`) и Invalid (значения, которые не соответствуют этому типу из-за опечаток, лишних символов или других отличий). Обратите внимание, что строковые литеральные типы в TypeScript требуют точного совпадения, включая регистр и все символы.
'ease-in''ease-out''easein''easeout''ease-in-out''ease''EASE-IN''ease-out '3. Опечатка в присваивании
В этом фрагменте TypeScript-кода используется строковый литеральный тип для определения допустимых значений цвета. Однако при присваивании значения переменной допущена ошибка в регистре строки, что приведет к ошибке компиляции. Исправьте строку с присваиванием, чтобы код стал корректным и соответствовал объявленному типу, устранив опечатку в регистре.
type Color = 'red' | 'green' | 'blue'; let myColor: Color = 'Red'; // Здесь ошибка в регистреconsole.log(myColor);4. Выбор аргумента
В этом задании вам предстоит заполнить пропуски в коде TypeScript, выбирая допустимые строковые значения для вызова функции, которая использует литеральные строковые типы. Функция `alignText` принимает только определённые значения выравнивания текста. Ваша задача — подобрать правильные аргументы из выпадающего списка, чтобы код работал корректно и соответствовал комментариям.
function alignText(alignment: 'left' | 'center' | 'right'): string {
return `Text aligned to ${alignment}`;
}
// Выравниваем по левому краю
console.log(alignText(input1S));
// Выравниваем по центру
console.log(alignText(input2S));
// Выравниваем по правому краю
console.log(alignText(input3S));5. Светофор
Из предложенных строк соберите корректное определение типа TypeScript, которое создаёт строковый литеральный тип TrafficLight, принимающий значения 'red', 'green' и 'yellow'. Игнорируйте лишние строки, которые не относятся к определению этого типа. Значения литералов должны идти в указанном порядке: 'red', затем 'green', затем 'yellow'.
typeTrafficLight='red'|'green'|'yellow'interface TrafficLight {'blue'&string6. Сравнение типов
Проанализируйте приведённый фрагмент кода на TypeScript. Обратите внимание на объявление переменной с литеральным типом и последующее сравнение её значения со строкой, не входящей в допустимый набор. Выберите правильный результат, который возникнет при попытке компиляции этого кода.
type Direction = "north" | "south" | "east" | "west";
let currentDirection: Direction = "north";
if (currentDirection === "up") {
console.log("Moving up");
}7. Компоненты объединения
Разметьте все элементы в объявлении типа Event. Укажите для каждого выделенного фрагмента, является ли он ключевым словом, именем типа, оператором присваивания, строковым литералом или оператором объединения. Это упражнение поможет закрепить понимание структуры объявлений с литеральными типами в TypeScript.
{{type~|~t1}} {{Event~|~t2}} {{=~|~t3}} {{'click'~|~t4}} {{|~|~t5}} {{'hover'~|~t6}} {{|~|~t7}} {{'drag'~|~t8}} {{|~|~t9}} {{'drop'~|~t10}};