JavaScript & TypeScriptМодуль 7: Основы TypeScript
Enums и Literal Types
Перечисления и литеральные типы
Цель урока
В этом уроке ты научишься:
- Создавать перечисления (enums)
- Использовать literal types
- Применять as const
Enum
Числовой enum
enum Direction {
Up, // 0
Down, // 1
Left, // 2
Right // 3
}
let dir: Direction = Direction.Up;
console.log(dir); // 0
console.log(Direction[0]); // "Up" (обратный маппинг)С явными значениями
enum Status {
Pending = 1,
Active = 2,
Completed = 3
}
console.log(Status.Active); // 2Строковый enum
enum Color {
Red = "RED",
Green = "GREEN",
Blue = "BLUE"
}
let color: Color = Color.Red;
console.log(color); // "RED"const enum
Компилируется в inline значения:
const enum Direction {
Up,
Down,
Left,
Right
}
let dir = Direction.Up;
// Компилируется в: let dir = 0;Literal Types
String Literals
type Status = "pending" | "active" | "completed";
let status: Status = "active";
// status = "unknown"; // Ошибка!
function setStatus(s: Status) {
console.log(s);
}Number Literals
type DiceRoll = 1 | 2 | 3 | 4 | 5 | 6;
let roll: DiceRoll = 4;
// roll = 7; // Ошибка!Boolean Literals
type True = true;
type False = false;as const
Делает значения readonly и literal:
// Без as const
let colors = ["red", "green", "blue"];
// тип: string[]
// С as const
let colors = ["red", "green", "blue"] as const;
// тип: readonly ["red", "green", "blue"]
// Для объектов
let config = {
api: "https://api.example.com",
timeout: 5000
} as const;
// все свойства readonly и literalИзвлечение типа
const STATUS = {
Pending: "pending",
Active: "active",
Completed: "completed"
} as const;
type Status = typeof STATUS[keyof typeof STATUS];
// "pending" | "active" | "completed"Enum vs Literal Types
// Enum
enum StatusEnum {
Pending = "pending",
Active = "active"
}
// Literal Type
type StatusLiteral = "pending" | "active";
// Оба работают, но:
// - Enum создаёт объект в рантайме
// - Literal type — только типы, исчезает при компиляцииРекомендация
Предпочитай literal types и as const. Enum нужен редко.
Практика
Задание 1: Enum
Задача: Создай enum для размеров.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
Medium
Задание 2: Literal Type
Задача: Создай literal type для направлений.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
north
Задание 3: as const
Задача: Используй as const для конфигурации.
Запустите код для проверки
Loading...
Ваш вывод:
Ожидаемый результат:
https://api.example.com
Проверь себя
- Чем числовой enum отличается от строкового?
- Что делает as const?
- Когда использовать enum, а когда literal types?