JS Tower
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

Проверь себя

  1. Чем числовой enum отличается от строкового?
  2. Что делает as const?
  3. Когда использовать enum, а когда literal types?