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

Автор

Переліки TypeScript — це фраза, яка часто зустрічається під час роботи з мовою TypeScript.

TypeScript є однією з наймолодших, але також вважається однією з найпопулярніших мов програмування розробників. TypeScript є розширенням (надмножиною) JavaScript. Таким чином, будь-який дійсний код JavaScript також дійсний у TypeScript. Однак TypeScript пропонує можливості статичного введення тексту (відсутня функція в JavaScript).

Що таке TypeScript Enums, варіанти їх використання та як їх створити? Ця стаття охопить усе, що вам потрібно знати про Enum.

Що таке TypeScript Enum?

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

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

Підводячи підсумок, переліки TypeScript важливі в наступних аспектах;

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

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

Різні Enum у TypeScript

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

Це різні типи Enum у TypeScript;

#1. Числові перерахування

Вам потрібно використати ключове слово «enum» і слідувати за ним назвою переліку, який ви хочете створити. Після цього ви створюєте каррі дужки, які вказуватимуть члени переліку. Це приклад числового переліку;

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

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

  Чи справді точні програми для моніторингу серцевого ритму? Ми тестуємо їх

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

CardinalDirections.West буде 8.

Що, якщо ми не призначимо значення першому елементу в каррі дужках? Нашим переліком буде;

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

TypeScript автоматично призначить північне значення 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)

Це те, що ви отримуєте;

«ПРАВО»

#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
}

Член Enum ‘Blue’ є постійним членом. З іншого боку, член enum ‘Green’ — це перелік, обчислений за допомогою функції Math.random() під час виконання.

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

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

Розглянемо цей код, який показує дні тижня;

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.

  Як створити посилання на інші слайди в презентації PowerPoint

#6. Навколишні перерахування

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

declare enum Color {
  Red,
  Green,
  Blue
}

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

Тепер ви розумієте різні типи enum у TypeScript. Тепер ми можемо показати, як ви можете використовувати enum різними способами. Це буде наш довідковий код;

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

Це деякі випадки використання;

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

console.log(Напрямок.Північ); // Виходи: ‘N’

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

Це дасть такий результат: «Поточний напрямок E»

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

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

enum Color {
  Red,
  Green,
  Blue,
}

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

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

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

  • Переліки є строго типізованими, а карти об’єктів – ні
  • Enums є «Типом», тоді як карти об’єктів є структурою даних
  • Переліки не є гнучкими, тоді як карти об’єктів є гнучкими
  Конференц-дзвінки до 5 осіб із Chrome або вашого телефону

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

Ми вже зазначали, що TypeScript — не єдина мова програмування з функцією enum. Дотримання найкращих практик гарантує вам написання чистого, оптимізованого коду без помилок. Це деякі з найкращих практик під час написання/використання переліків TypeScript;

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

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

Висновок

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

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

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