Литеральные типы

Добро пожаловать на следующий урок! На этом уроке Вы узнаете о литеральных типах — возможности TypeScript, позволяющей задавать для переменных точные конкретные значения. Благодаря этому код становится более предсказуемым и типобезопасным. Давайте разберёмся!

Что такое литеральные типы?

Литеральные типы в TypeScript позволяют переменной хранить конкретное значение, а не просто значение общего типа, такого как строка или число. Например, можно ограничить переменную значением только "yes" или "no".

Пример:

Задание: объявите переменную с литеральным типом и присвойте ей допустимые и недопустимые значения.

let answer: "yes" | "no";
answer = "yes"; 
// Valid
// answer = "maybe"; 
// Error: Type '"maybe"' is not assignable to type '"yes" | "no"'.

Литеральные типы со строками

Строковые литеральные типы ограничивают переменную определённым набором строковых значений. Пример:

Задание: создайте тип для направлений и присвойте значения переменной.

type Direction = "up" | "down" | "left" | "right";

let move: Direction;
move = "up"; // Valid
// move = "forward"; 
// Error: Type '"forward"' is not assignable to type '"up" | "down" | "left" | "right"'.

Литеральные типы с числами

Литеральные типы можно использовать и с числами, чтобы ограничить переменную определённым набором числовых значений. Пример:

Задание: определите числовой литеральный тип для результатов броска кубика и проверьте его.

type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;

let roll: DiceRoll;
roll = 4; // Valid
// roll = 7; 
// Error: Type '7' is not assignable to type '1 | 2 | 3 | 4 | 5 | 6'.

Литеральные типы в функциях

Литеральные типы можно использовать в параметрах функций, чтобы разрешить только определённые значения. Пример:

Задание: напишите функцию с параметром, использующим литеральные типы.

function setStatus(status: "active" | "inactive"): void {
  console.log(`The status is now ${status}`);
}

setStatus("active"); 
// Output: The status is now active
// setStatus("pending"); 
// Error: Type '"pending"' is not assignable to type '"active" | "inactive"'.

Литеральные типы и псевдонимы типов

Чтобы повторно использовать литеральные типы, можно определить их как псевдонимы типов. Пример:

Задание: создайте псевдоним типа для цветов светофора и используйте его в переменной.

type TrafficLight = "red" | "yellow" | "green";

let light: TrafficLight = "red";
console.log(light);
 // Output: red

Использование литеральных типов с объектами

Литеральные типы можно использовать внутри объектов, чтобы ограничить значения определённых свойств. Пример:

Задание: создайте тип объекта со свойством, использующим литеральные типы.

type Button = {
  label: string;
  size: "small" | "medium" | "large";
};

let submitButton: Button = {
  label: "Submit",
  size: "medium",
};

console.log(submitButton);

Распространённые ошибки

Вот несколько распространённых ошибок при использовании литеральных типов:

• Забыть обновить все допустимые значения при изменении литерального типа.
• Присвоить значения, не входящие в литеральный тип (TypeScript обнаружит эту ошибку).
• Использовать литеральные типы для динамичных данных, когда гибкость важнее.

Совет: используйте литеральные типы для контролируемых и предсказуемых сценариев!

Отличная работа!

Поздравляем! Вы научились использовать литеральные типы в TypeScript для определения точных и ограниченных значений. Литеральные типы особенно полезны при создании предсказуемого и типобезопасного кода. На следующем уроке мы рассмотрим поддержку TypeScript для работы с функциями. Продолжайте программировать!