Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Перечисления Основы Typescript

В этом уроке мы познакомимся с перечислением. Такая конструкция языка позволяет создать набор имен, а затем обращаться к ним.

Использование перечислений

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

enum OrderStatus {
  Created,
  Paid,
  Shipped,
  Delivered,
}

const order = {
  items: 3,
  status: OrderStatus.Created,
};

Самый распространенный пример использования перечислений — хранение разных статусов. Но есть и другие случаи. Например, с их помощью легко и удобно хранить и обращаться к различным справочным данным:

  • Направления движения
  • Стороны света
  • Дни недели
  • Месяцы
enum CardinalDirection {
  North,
  South,
  East,
  West,
}

const direction = CardinalDirection.North;

Перечисление — это и значение, и тип. Его можно указывать как тип в параметрах функции:

setStatus(status: OrderStatus)

Также перечисления после компиляции превращаются в JavaScript-объект, в котором каждому значению соответствует свойство. У этого свойства есть тип number и начинается он с 0:

const status = OrderStatus.Created;
console.log(status); // 0

Это позволяет удобно использовать стандартные методы — например, Object.keys и Object.values:

const statuses = Object.keys(OrderStatus);
console.log(statuses); // ['0', '1', '2', '3', 'Created', 'Paid', 'Shipped', 'Delivered']

Среди ключей мы видим числа '0', '1', '2', '3'. Компилятор создает такие числовые ключи автоматически, а созданный объект выглядит так:

console.log(OrderStatus); // =>
// {
//   '0': 'Created',
//   '1': 'Paid',
//   '2': 'Shipped',
//   '3': 'Delivered',
//   'Created': 0,
//   'Paid': 1,
//   'Shipped': 2,
//   'Delivered': 3
// }

Но можно избавиться от создания дополнительных ключей, если указать строковые значения:

enum OrderStatus {
  Created = '0',
  Paid = '1',
  Shipped = '2',
  Delivered = '3',
}

const statuses = Object.keys(OrderStatus);
console.log(statuses); // ['Created', 'Paid', 'Shipped', 'Delivered']

console.log(OrderStatus); // =>
//   'Created': '0',
//   'Paid': '1',
//   'Shipped': '2',
//   'Delivered': '3'
// }

Зачем нужны перечисления

Использование enum позволяет коду быть более читаемым и поддерживаемым, так как вместо магических чисел или строк используются ясные и понятные имена. Кроме того это позволяет избежать некоторых ошибок. Рассмотрим на примере.

Возьмем ситуацию, когда нам нужно описать разные уровни доступа пользователя в системе.

Без использования enum это могло бы выглядеть так:

if (user.accessLevel === 'admin') {
  // делаем что-то важное
}

С использованием enum код становится более структурированным и понятным:

enum AccessLevel {
  Admin,
  Editor,
  User
}

const user = { name: "Kirill Mokevnin", accessLevel: AccessLevel.Admin };

if (user.accessLevel === AccessLevel.Admin) {
    // действия администратора
}

В этом примере AccessLevel является enum, который определяет три возможных уровня доступа. При использовании значения enum TypeScript обеспечивает автодополнение и проверку типов, что делает код более безопасным и удобным для разработки.

Выводы

В этом уроке мы узнали, как и зачем используется перечисление. Также мы разобрали, что его можно указывать как тип в параметрах функции.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 21 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 21 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 ноября

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»