Уроки модуля (2/2)
Литеральные типы и утверждения
TypeScript предоставляет расширенные инструменты, позволяющие сузить возможные значения переменных и заставить компилятор распознавать более конкретные типы, когда это необходимо.
Литеральные типы
Литеральный тип представляет собой точное одно значение (например, определенную строку или число). Обычно они комбинируются с типами объединения:
type TrafficLight = 'red' | 'yellow' | 'green';
let light: TrafficLight;
light = 'red'; // OK
light = 'blue'; // Error: "blue" is not assignable to TrafficLightТип утверждения (as)
Иногда у вас есть информация о типе, которую TypeScript не может знать во время компиляции. В этих случаях вы можете использовать утверждение типа, используя ключевое слово as:
const myCanvas = document.getElementById('main_canvas') as HTMLCanvasElement;Утверждение сообщает компилятору: "Поверьте мне, я знаю, что этот элемент является HTMLCanvasElement". Он не выполняет никаких проверок или приведения типов во время выполнения; это помогает только проверке типов.
Константные утверждения (as const)
Когда мы объявляем объект или массив с помощью const, TypeScript по-прежнему позволяет изменять его внутренние свойства. Добавляя as const в конце, вся структура замораживается и становится доступной только для чтения, преобразуя все свойства в их точные литеральные типы:
const colors = ['red', 'green', 'blue'] as const;
// colors[0] = "yellow"; // Error: array is read-onlyТипы литералов шаблона
Типы литералов шаблона создаются поверх строк шаблона JavaScript, но используются в позициях типов. Они позволяют объединять несколько типов литералов в один:
type Size = 'small' | 'large';
type Color = 'red' | 'blue';
// Creates the union: "small-red" | "small-blue" | "large-red" | "large-blue"
type ItemId = `${Size}-${Color}`;Строковые утилиты в литеральных типах шаблонов
TypeScript предоставляет специальные типы утилит для управления символами в литеральных типах шаблонов:
Capitalize<StringType>: делает первую букву строки заглавной.Uncapitalize<StringType>: убирает с заглавной буквы первую букву строки.Uppercase<StringType>: преобразует всю строку в верхний регистр.Lowercase<StringType>: преобразует всю строку в нижний регистр.
type ActionType = 'click' | 'hover';
// Generates: "onClick" | "onHover"
type EventHandlers = `on${Capitalize<ActionType>}`;Попробуйте сами
Упражнение 1: Буквенное объединение направлений
Определите литеральный тип с именем Direction, который принимает только строки «вверх», «вниз», «влево» или «вправо». Затем объявите функцию с именем move(dir: Direction): string, которая возвращает строку «Moving», за которой следует полученное направление.
Показать подсказку
Сначала определите псевдоним типа с четырьмя параметрами, разделенными |, затем объявите функцию перемещения, аннотирующую параметр и тип возвращаемого значения.
Решение доступно после 3 попыток
Упражнение 2. Утверждение в JSON.parse
Функция JSON.parse по умолчанию возвращает любой тип. Измените функцию parseUser так, чтобы результат JSON.parse(json) утверждался как тип { имя пользователя: строка } с использованием ключевого слова as.
Показать подсказку
Добавьте «as { username: string }» сразу после вызова JSON.parse(json).
Решение доступно после 3 попыток
Упражнение 3. Шаблонный литерал для событий
Учитывая типы статуса и действия, определите тип строки шаблона с именем «Событие» в формате «Статус-действие» (например, «открыть-щелкнуть»).
Показать подсказку
Используйте обратные кавычки, чтобы определить тип и синтаксис ${Status}-${Action} внутри.
Решение доступно после 3 попыток
Упражнение 4. Тип шаблонного литерала с заглавными буквами
Определите событие буквального типа, которое может быть «щелчком» или «наведением». Затем используйте шаблонные литеральные типы, чтобы объявить тип EventHandler, представляющий строки в формате, за которым следует имя события, написанное с заглавной буквы (т. е. «onClick» или «onHover»).
Показать подсказку
Используйте Capitalize<Event> внутри литерала шаблона, чтобы сделать первую букву события заглавной.
Решение доступно после 3 попыток