Перечисления в TypeScript
— это удобный способ создания наборов значений, количество и названия которых известны заранее и не должны изменяться. Для создания перечислений используется ключевое слово enum .
Давайте создадим перечисление, содержащее название пор года:
enum Season < Winter, Spring, Summer, Autumn >;
Давайте посмотрим, какие операции можно совершать с перечислениями.
Получение по ключу
Данные в перечислениях можно получать по числовым ключам, подобно элементам массива:
let current: string = Season[0]; console.log(current); // ‘Winter’
Получение по значению
А можно по названию элемента получить его ключ:
let current: number = Season.Winter; console.log(current); // 0
Перечисление как тип
Каждое перечисление создает свой собственный тип данных. Давайте для примера для переменной, хранящей текущий сезон присвоим тип Season :
let current: Season;
Запишем в нашу переменную номер сезона:
let current: Season = Season.Winter; console.log(current); // 0
Можно указать номер сезона вручную:
let current: Season = 3;
А вот если попытаться записать данные другого типа, например, строку, то будет ошибка:
let current: Season = ‘str’; // будет ошибка
К сожалению, диапазон значений не отслеживается и можно записать номер, отсутствующий в нашем перечислении:
let current: Season = 7; // ошибки не будет
При проверке через оператор typeof наша переменная отдаст числовой тип:
let current: Season = 3; console.log(typeof current); // «number»
Подведя итог можно сказать, что такой тип проверяется не сильно строго и от этого его ценность сомнительна.
Указание номеров
Нумерация номеров не обязательно должна быть с нуля. Можно указать ключи в явном виде следующим образом:
enum Season < Winter = 1, Spring = 2, Summer = 3, Autumn = 4 >;
let current: Season = Season.Winter; console.log(current); // выведет 1
Упрощенные ключи
Не обязательно указывать ключи всем элементам. Достаточно указать его первому элементу и ключи следующих элементов будут увеличиваться по порядку. Пример:
enum Season < Winter = 1, Spring, Summer, Autumn >;
let current: Season = Season.Summer; console.log(current); // выведет 3
Строковые перечисления
Ключами могут быть не только числа, но и строки:
enum Season < Winter = 'Зима', Spring = 'Весна', Summer = 'Лето', Autumn = 'Осень' >;
let current: Season = Season.Summer; console.log(current); // ‘Лето’
Практические задачи
Сделайте перечисление с названиями дней недели.
Сделайте перечисление с названиями месяцев.
Перечисления (Enums) — Основы 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' // > Открыть доступ
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно
- 130 курсов, 2000+ часов теории
- 1000 практических заданий в браузере
- 360 000 студентов
Наши выпускники работают в компаниях:
TypeScript: Перечисления (Enums)
В этом уроке мы познакомимся с перечислением. Такая конструкция языка позволяет создать набор имен, а затем обращаться к ним.
Использование перечислений
Перечисления используют вместо строк для постоянных значений:
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' // > Выводы
В этом уроке мы узнали, для чего и как используется перечисление. Также мы разобрали, что его можно указывать как тип в параметрах функции.
Задание
- Реализуйте перечисление ModalStatus с двумя значениями: Opened и Closed
- Реализуйте функцию buildModal() . Он возвращает объект, который описывает модальное окно. Параметры функции:
- Текст, который должен быть внутри окна после инициализации
- Статус, с которым надо создать объект окна
Функция возвращает объект с двумя полями: text (здесь хранится переданный текст) и status (здесь хранится переданный статус)
const modal = buildModal('hexlet forever', ModalStatus.Opened); //
Упражнение не проходит проверку — что делать? ��
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет ��
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя ��
Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно ��
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.
Полезное
Тип enum в JavaScript
Тип enum или по-другому перечисление — это особый тип данных, который позволяет задавать некий список взаимосвязанных констант. Переменные этого типа могут принимать значения только из заданного в перечислении набора. Это свойство перечислений делает их удобным инструментом для реализации списка связанных значений.
Но в JavaScript на текущий момент нет нативной (родной) реализации перечислений. Поэтому давайте посмотрим как мы можем реализовать перечисления на JavaScript самостоятельно.
Начнем с простого:
// задаем некоторое перечисление для тестирования
const color = Colors.RED;
switch(color)
case Colors.RED:
console.log(‘Вы выбрали красный цвет’);
break;
case Colors.GREEN:
console.log(‘Вы выбрали зеленый цвет’);
break;
case Colors.BLUE:
console.log(‘Вы выбрали синий цвет’);
break;
default:
console.log(‘Неизвестный цвет’);
>
Пример выше — самая простая реализация перечисления, во многих случаях ее будет достаточно, но она далека от идеала. Так например, ничего не мешает изменить значение «константы» перечисления на какое-либо другое:
Colors.RED = ‘что то непонятное’ // в перечислении новое значение
Поэтому более правильная реализации перечислений в JavaScript будет иметь следующий вид:
/**
*
* @param obj объект со значениями перечисления
*/
function Enum(obj)
// итоговый объект
const newObj = <>;
// проходимся по каждому свойству переданного в функцию объекта
for( const prop in obj )
// проверяем наличие собственного свойства у объекта
if (obj.hasOwnProperty(prop))
// помещаем в новый объект специальный примитивный тип JavaScript Symbol
newObj[prop] = Symbol(obj[prop]);
>
>
// делаем объект неизменяемым (свойства объекта нельзя будет изменить динамически)
return Object.freeze(newObj);
>
Пример с новой реализацией:
const color = Colors.RED;
console.log(‘color === Colors.RED: ‘, color === Colors.RED) // true
console.log(‘\’red\’ === Colors.RED: ‘, ‘red’ === Colors.RED) // false — строка не равна значению перечисления.
console.log(‘color === Colors.GREEN: ‘, color === Colors.GREEN) // false
Colors.RED = ‘red’; // не меняет значение в перечислении
Как видите новая реализация лучше предыдущей и включает более строгое сравнение типов, которое и требуется от перечислений.
Создано 24.11.2020 14:00:00
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
- Кнопка:
Она выглядит вот так: - Текстовая ссылка:
Она выглядит вот так: Как создать свой сайт - BB-код ссылки для форумов (например, можете поставить её в подписи):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2023 Русаков Михаил Юрьевич. Все права защищены.