Ключ до чіткості коду

Автор

Перелічувані типи, або Enums, є поширеним поняттям у розробці на TypeScript.

TypeScript – відносно молода, але дуже популярна мова програмування серед розробників. Вона є надбудовою над JavaScript, тобто будь-який коректний код JavaScript є також коректним кодом TypeScript. Головною відмінністю є те, що TypeScript надає можливість статичної типізації, чого немає в JavaScript.

Отже, що таке TypeScript Enums, де вони застосовуються і як їх створювати? У цій статті ми розглянемо всі ключові аспекти, що стосуються перелічуваних типів.

Що таке TypeScript Enum?

Перелічувані типи (Enums) – це структури даних фіксованої довжини, які містять набір незмінних значень, тобто констант. Enums використовуються не лише в TypeScript, а й в інших об’єктно-орієнтованих мовах, таких як C# і Java.

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

Підсумовуючи, перелічувані типи TypeScript є важливими з таких причин:

  • Вони надають гнучкість, дозволяючи розробникам чітко документувати та виражати наміри і варіанти використання.
  • Enum дозволяють створювати ефективні спеціальні константи в JavaScript.
  • Економлять час компіляції та виконання під час перетворення коду TypeScript на JavaScript.

TypeScript Enum може бути як рядковим, так і числовим. Варто пам’ятати, що ці переліки обробляються на етапі компіляції та не проходять тестування. TypeScript перетворює їх у відповідний код JavaScript.

Різні види Enum у TypeScript

Тепер, коли ми розуміємо, що таке Enum, розглянемо, як вони працюють у TypeScript. Ви можете налаштувати середовище розробки, встановивши TypeScript та Node.js локально, або використовувати онлайн-сервіси. Для демонстрації різних переліків TypeScript ми використаємо TypeScript Playground.

Існують такі типи Enum у TypeScript:

#1. Числові переліки

Щоб створити числовий перелік, необхідно використати ключове слово “enum” і вказати його назву. Після цього в фігурних дужках перелічуються елементи переліку. Ось приклад:

enum CardinalDirections {
    North = 5,
    East,
    South,
    West,
};

У наведеному прикладі визначено перелік CardinalDirections з чотирма елементами. Можливими значеннями для цього переліку є лише чотири напрямки (північ, схід, південь і захід), що робить його оптимальним для зберігання даних про напрямки.

Ми присвоїли CardinalDirections.North значення 5, а інші значення TypeScript присвоїв автоматично. Наприклад, значення для CardinalDirections.East буде 6, оскільки TypeScript збільшує попереднє значення на 1.

Таким чином, CardinalDirections.West матиме значення 8.

А що буде, якщо не присвоїти значення першому елементу? Ось приклад:

enum CardinalDirections {
    North,
    East,
    South,
    West,
};

У цьому випадку TypeScript автоматично присвоїть елементу North значення 0. Якщо ви звернетесь до CardinalDirections.West, то отримаєте 3.

#2. Рядкові переліки

Кожен елемент рядкового переліку має бути ініціалізований рядковим значенням або літералом. Ось приклад:

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

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

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
console.log(Direction.Right)

Ви отримаєте вивід:

“RIGHT”

#3. Неоднорідні переліки

Можна поєднувати числові та рядкові значення для створення гетерогенного переліку. Ось приклад:

enum HeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

#4. Постійні та обчислювані елементи enum

Елементи Enum мають значення, які можуть бути “постійними” або “обчислюваними”.

Ось приклад постійного переліку:

enum E1 {
    X,
    Y,
    Z,
}

У цьому випадку перший елемент enum не має ініціалізатора, і TypeScript присвоює йому значення 0.

Розглянемо ще один приклад:

enum E1 {
    X=1,
    Y,
    Z,
}

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

Обчислювані переліки поєднують постійні та обчислювані елементи. Ось приклад:

enum Color {
    Red = 100,
    Green = (Math.random() * 100),
    Blue = 200
}

Елемент ‘Blue’ є постійним. Натомість, елемент ‘Green’ є обчислюваним, оскільки його значення визначається за допомогою функції Math.random() під час виконання.

#5. Константні переліки

Константні переліки використовуються для підвищення продуктивності числових переліків. У цьому випадку ми оголошуємо перелік як константу.

Розглянемо наступний код, який представляє дні тижня:

enum Weekday {
    Monday = 1,
    Tuesday,
    Wednesday,
    Thursday,
    Friday
}

Якщо ми виконаємо console.log(Weekday.Thursday), то отримаємо відповідь 4. Проте, якщо подивитись на JavaScript код, створений під час компіляції, побачимо наступне:

"use strict";
var Weekday;
(function (Weekday) {
    Weekday[Weekday["Monday"] = 1] = "Monday";
    Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
    Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
    Weekday[Weekday["Thursday"] = 4] = "Thursday";
    Weekday[Weekday["Friday"] = 5] = "Friday";
})(Weekday || (Weekday = {}));
console.log(Weekday.Thursday);

Ми можемо змінити цей код і оголосити “день тижня” константою:

const enum Weekday {
    Monday = 1,
    Tuesday,
    Wednesday,
    Thursday,
    Friday
}

У цьому випадку, якщо ми виконаємо console.log(Weekday.Thursday), JavaScript код, що згенерується, буде таким:

"use strict";
console.log(4 /* Weekday.Thursday */);

Як бачимо, JavaScript код є більш оптимізованим, коли ми оголошуємо перелік як const.

#6. Зовнішні переліки

Зовнішні переліки використовують ключове слово ‘declare’ для опису форми вже існуючих переліків. Розглянемо приклад:

declare enum Color {
    Red,
    Green,
    Blue
}

Зовнішні переліки оголошуються поза будь-яким модулем і можуть використовуватись для створення багаторазових типів. Таким чином, ви завжди можете імпортувати зовнішні переліки та використовувати їх у своїх компонентах, якщо вони оголошені глобально.

Тепер, коли ми розібрали різні типи переліків у TypeScript, розглянемо приклади їх використання. Для цього ми візьмемо за основу наступний перелік:

enum Direction {
    North="N",
    East="E",
    South="S",
    West="W",
};

Ось декілька прикладів використання:

  • Отримання елементів переліку. Наприклад, якщо нам потрібен доступ до півночі, ми можемо використати:

console.log(Direction.North); // Виводить: ‘N’

  • Використання елементів переліку: можна використовувати певний елемент переліку для представлення конкретного напрямку. Наприклад:
const currentDirection = Direction.East;
console.log(`Поточний напрямок: ${currentDirection}`);

Виведе: “Поточний напрямок: E”

Enum проти карт об’єктів у TypeScript

Переліки використовуються для представлення обмеженого набору значень. Наприклад, кольори веселки або дні тижня. Переліки строго типізовані, тобто вони можуть виявляти помилки під час розробки. Ось приклад переліку TypeScript:

enum Color {
    Red,
    Green,
    Blue,
}

Карти об’єктів/словники/пари ключ-значення зберігають та отримують значення, пов’язані з певними ключами. Ви можете використовувати їх для зберігання будь-яких типів даних. Проте, вони не є строго типізованими, тобто помилки можуть не виявлятися під час розробки. Ось приклад карти об’єктів тих самих кольорів:

const colors = {
    red: "FF0000",
    green: "00FF00",
    blue: "0000FF",
};

Основні відмінності між переліками та картами об’єктів у TypeScript:

  • Переліки є строго типізованими, а карти об’єктів – ні.
  • Enums є “типом”, а карти об’єктів є структурою даних.
  • Переліки не є гнучкими, тоді як карти об’єктів є гнучкими.

Найкращі практики використання переліків у TypeScript

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

  • Пишіть назви переліків з великої літери: завжди починайте назву переліку з великої літери. Наприклад, “Number” замість “number”.
  • Використовуйте переліки для констант: найкраще використовувати їх для визначення фіксованого набору пов’язаних елементів. Наприклад, у тижні є лише 7 днів. Елементи переліків не повинні змінюватися під час виконання.
  • Уникайте надмірного використання: хоча ви можете бути вражені новою концепцією, використовуйте переліки TypeScript помірно. Вони корисні, якщо ви хочете зберегти читабельність коду.
  • Розглядайте переліки як переліки: використовуйте їх для представлення саме переліків, а не інших структур даних.
  • Уникайте автоматичних переліків: TypeScript автоматично присвоює значення, якщо ви не зробите цього явно. Завжди присвоюйте значення елементам, щоб уникнути несподіваної поведінки.
  • Документуйте переліки: завжди документуйте або коментуйте свій код, якщо ви збираєтесь використовувати його публічно. Поясніть призначення кожного переліку і чому це є найкращим варіантом.

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

Висновок

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

Наприклад, не використовуйте переліки з динамічними значеннями. Також не можна використовувати переліки як змінні – це призведе до помилок.

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