Що таке enum у TypeScript?

TypeScriptJunior~1 хв читання

Що таке `enum` у TypeScript

enum (перелічення) - це спеціальний тип у TypeScript, який дозволяє задавати набір іменованих констант.

Він використовується, коли потрібно позначити фіксований набір можливих значень, наприклад ролі, статуси, напрямки тощо.

Навіщо потрібен `enum`

Замість того щоб писати "магічні рядки" або числа вручну:

javascript

if (status === "loading") { ... }

ти можеш використовувати іменовані значення, що:

робить код читабельнішим,
знижує ризик помилок при написанні,
покращує автодоповнення та перевірку типів.

Як оголосити `enum`

Приклад 1. Числовий `enum` (типово)

javascript

enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let move: Direction = Direction.Up;
console.log(move); // 0

Типово TypeScript присвоює значення від 0 і далі (Up = 0, Down = 1, ...).

Приклад 2. Задання власних числових значень

javascript

enum StatusCode {
  OK = 200,
  NotFound = 404,
  ServerError = 500,
}

console.log(StatusCode.OK); // 200
console.log(StatusCode[404]); // "NotFound"

Числові enum - двосторонні: можна отримати ім'я за значенням і значення за іменем.

Приклад 3. Рядковий `enum`

javascript

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

console.log(Direction.Left); // "LEFT"

На відміну від числових, рядкові enum - односторонні: не можна отримати ключ за значенням.

Приклад 4. Гетерогенний (змішаний) `enum` (не рекомендується)

javascript

enum Mix {
  Yes = 1,
  No = "NO",
}

Такий варіант існує, але псує читабельність і заважає автодоповненню. Краще уникати змішаних типів.

Як використовувати `enum`

У змінних:

javascript

let currentDirection: Direction = Direction.Right;

У функціях:

javascript

function movePlayer(direction: Direction) {
  switch (direction) {
    case Direction.Up:
      console.log("Йдемо вгору");
      break;
    case Direction.Down:
      console.log("Йдемо вниз");
      break;
  }
}

В інтерфейсах:

javascript

enum UserRole {
  Admin,
  User,
  Guest,
}

interface User {
  name: string;
  role: UserRole;
}

const tim: User = {
  name: "Tim",
  role: UserRole.Admin,
};

Автоматична нумерація

TypeScript сам нумерує значення, якщо ти не вказав їх вручну:

javascript

enum Priority {
  Low,      // 0
  Medium,   // 1
  High,     // 2
}

Можна задати початкове значення - решта підуть за порядком:

javascript

enum Priority {
  Low = 1,  // 1
  Medium,   // 2
  High,     // 3
}

Компіляція у JavaScript

Під час компіляції TypeScript перетворює enum на звичайний об'єкт:

javascript

var Direction;
(function (Direction) {
  Direction[(Direction["Up"] = 0)] = "Up";
  Direction[(Direction["Down"] = 1)] = "Down";
})(Direction || (Direction = {}));

Це дозволяє виконувати зворотне зіставлення (числові enum -> двосторонні).

Альтернатива: `const enum`

Якщо тобі не потрібне двостороннє зіставлення і ти хочеш максимальну продуктивність, використовуй const enum - він видаляється під час компіляції і не створює об'єкт у JS-коді:

javascript

const enum Direction {
  Up,
  Down,
  Left,
  Right,
}

const dir = Direction.Up;
console.log(dir); // 0

Компілюється просто у:

javascript

const dir = 0 /* Up */;

Підсумок

Вид enum	Приклад	Значення	Зворотне зіставлення
Числовий	`enum A { X, Y }`	0, 1, ...	Так
Рядковий	`enum A { X = "x" }`	"x"	Ні
Гетерогенний	`enum A { X = 1, Y = "y" }`	1, "y"	Не рекомендується
`const enum`	`const enum A { X, Y }`	вбудовується в код	Ні (інлайн)

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.