Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке enum у TypeScript?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

### Що таке `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 }` | вбудовується в код | Ні (інлайн) |

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати562 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.