Посібник, як з ним працювати

TypeScript — це надмножина JavaScript, яка допомагає писати безпечний код.

За допомогою TypeScript ви зможете раніше виявляти помилки та виправляти їх. Однією з важливих функцій TypeScript є Enums. Enum — популярна конструкція в TypeScript, яка допомагає писати безпечніший код.

У цій статті я поясню Enums, як їх створювати та використовувати, а також багато іншого, на що варто звернути увагу.

Що таке Enum?

Enum є скороченням від enumerated type. Перерахований тип даних визначається різними значеннями, які може приймати змінна цього типу. Різні значення, які він може приймати, часто називають членами або елементами.

У цій статті ми будемо називати їх членами. Переліки — це не просто функція TypeScript. Навпаки, перераховані типи також присутні та використовуються в інших мовах програмування. Використання переліків забезпечує кращу безпеку типів у програмах TypeScript.

Читайте також: Найкращі бібліотеки TypeScript і середовища виконання, які варто знати розробнику

Навіщо використовувати Enum?

Enum допоможе вам визначити, які значення може містити змінна. Вони також допомагають визначити, які значення може приймати аргумент функції. Це допомагає гарантувати, що розробники завжди надають очікувані значення змінним і аргументам функції. Це допоможе усунути помилки та допоможе вам написати безпечніший і надійніший код.

Передумови для роботи з Enum

У цьому підручнику я покажу, як працювати з переліками у TypeScript. Щоб слідувати цьому підручнику, вам потрібно вміти запускати та виконувати код TypeScript.

Тому вам потрібно встановити NodeJs для виконання вашого коду JavaScript. Якщо у вас не встановлено TypeScript, у відео нижче показано, як це зробити.

Крім того, якщо ви хочете негайно скомпілювати та виконати сценарій, скористайтеся ts-node. Хоча це те, що я буду робити в цій статті, для великих проектів я б рекомендував встановити TypeScript. Щоб виконати сценарій за допомогою ts-node, скористайтеся такою командою:

npx ts-node <scriptname>

У цій статті також передбачається, що ви знайомі з JavaScript і базовим TypeScript.

Робота з простим переліком

Як створити простий Enum

Enum у TypeScript створюються за допомогою ключового слова enum. Далі йде назва переліку, а потім список членів, які містить перелік. Ось приклад, де ми оголошуємо перелік для чотирьох сторін світу на компасі.

enum Direction {
    North,
    East,
    South,
    West
}

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

Як використовувати простий перелік

Ви присвоюєте перераховане значення змінній таким чином:

const heading: Direction = Direction.North;

Оскільки ми призначаємо змінну під час оголошення, TypeScript може визначити тип даних. Як наслідок, нам не потрібно затверджувати тип. Замість цього ми можемо написати це:

const heading = Direction.North;

Щоб дізнатися, яке значення має змінна заголовка, ми можемо записати її в console.log.

console.log(heading);

Результатом цього буде:

0

Змінна заголовка містить нульове значення, хоча ми призначили їй значення Direction.North. Це пояснюється тим, що під час створення переліків кожному члену присвоюється числове значення. Першому члену присвоюється 0, другому 1 і так далі. Ось демонстрація:

console.log(Direction.North, Direction.East, Direction.South, Direction.West)

Таким чином, ви можете перевірити, чи змінна заголовка містить Північ, стверджуючи, що вона дорівнює нулю. Наприклад:

// Asserting equality
let isNorth = heading == 0;

// Printing the result
console.log(isNorth);

Як було показано раніше, Direction.North дорівнює 0. Отже, замість того, щоб перевіряти, чи курс дорівнює нулю, ми можемо перевірити, чи дорівнює він Direction.North.

// Checking if direction is North
isNorth = heading == Direction.North;

// Printing the result
console.log(isNorth);

Все це корисно; швидше за все, саме так ви будете використовувати перераховані значення. Однак ви можете зробити більше, як ви побачите пізніше. У наступному розділі буде обговорено, як можна працювати з настроюваними значеннями.

Робота з настроюваними значеннями

Коли ви створюєте enum, TypeScript автоматично призначає членам числові значення, починаючи з нуля. Однак ви можете захотіти, щоб ваші учасники мали спеціальні значення замість стандартних, у такому випадку ви можете призначити їх. Ось так:

enum StarRating {
    VeryPoor = 1,
    Poor = 2,
    Average = 3,
    Good = 4,
    Excellent = 5
}

Крім того, ви можете зробити наступне:

enum StarRating {
    VeryPoor = 1,
    Poor,
    Average,
    Good,
    Excellent
}

У цьому випадку першому члену буде присвоєно значення 1. Наступні варіанти будуть автоматично збільшені порівняно з попереднім вибором. Таким чином, Погано матиме рейтинг 2, середній 3 і так далі.

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

console.log(typeof StarRating.Average);

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

console.log(StarRating.Excellent > StarRating.Average)

Це виведе «true».

Використання рядків як настроюваних значень

Як згадувалося раніше, варіанти enum можуть мати рядкові значення, а не просто числа. Ось як це зробити:

enum Choice {
    RedPill = "Know Everything"
    BluePill = "Know Nothing"
}

У цьому випадку варіанти переліку поводитимуться як попередні. Однак, оскільки значення є рядками, ви можете виконувати рядкові операції, а не числові операції, як у попередньому прикладі.

Гетерогенні переліки

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

enum Mixed {
    First = "String"
    Second = 2
}

Заключні слова

У цій статті ми розглянули, що таке переліки у TypeScript. Ми також обговорили, чому вони важливі. Ми також розглянули різні види значень, які можуть мати члени enum.

Далі перегляньте нашу статтю про тип проти інтерфейсу в TypeScript.