Створення об'єднаного типу в TypeScript з динамічно доданими значеннями

Створення об’єднаного типу в TypeScript з динамічно доданими значеннями

3 Березня 2024 в 13:14 213

У TypeScript існує можливість використовувати об’єднані типи (union types) для оголошення типу, який може приймати кілька різних значень. Це корисний інструмент при використанні статичного аналізатора типів, такого як TypeScript, для забезпечення правильності типів у програмах. Однак іноді виникає потреба створити об’єднаний тип з динамічно доданими значеннями, які визначаються під час виконання програми.

Зазвичай, коли ми стикаємося з необхідністю створення об’єднаного типу в TypeScript, ми маємо фіксований набір значень, з якими ми працюємо. Наприклад:

const list = ['a', 'b', 'c'] as const;
type listType = typeof list[number]; // 'a' | 'b' | 'c'

1 2	const list = ['a', 'b', 'c'] as const; type listType = typeof list[number]; // 'a' \| 'b' \| 'c'

У цьому випадку ми маємо статичний набір значень ‘a’, ‘b’, ‘c’, і ми можемо легко створити об’єднаний тип, використовуючи ключове слово typeof.

Проте, коли ми хочемо додати до цього набору деякі значення динамічно, на основі змінної або константи, ситуація ускладнюється. Наприклад, якщо нам потрібно додати N нових значень ‘d1’, ‘d2’, …, ‘dN’, де N – це змінна, і після цього створити тип, що включає всі ці значення, ми зіштовхуємося з деякими труднощами.

Одним з можливих рішень є використання оператора розширення масиву (spread operator) для додавання нових значень до існуючого масиву. Наприклад:

const list = ['a', 'b', 'c'];
const list2 = [...list, 'd1'] as const;
type listType = typeof list[number] | typeof list2[number]; // 'a' | 'b' | 'c' | 'd1'

const list = ['a', 'b', 'c'];

const list2 = [...list, 'd1'] as const;

type listType = typeof list[number] | typeof list2[number]; // 'a' | 'b' | 'c' | 'd1'

У цьому прикладі ми створюємо новий масив list2, розширюючи його значенням ‘d1’. За допомогою ключового слова typeof ми можемо отримати тип кожного елемента масиву, а потім об’єднати їх, щоб отримати бажаний об’єднаний тип.

Проте, цей підхід має свої обмеження. Якщо ми додамо лише одне значення, тип нового масиву буде визначений як string[], а не як об’єднаний тип. Це означає, що ми втрачаємо коректність типу і можемо отримати лише тип string, а не об’єднаний тип, як очікувалося.

Є кілька способів вирішення цієї проблеми. Один з них – використання змінної для зберігання списку, включаючи додані значення, а потім використання оператора typeof знову для створення об’єднаного типу. Проте цей підхід може виявитися непрактичним у випадках, коли список дуже великий або значення додані динамічно під час виконання програми.

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

type listType<T extends string[]> = T[number];
const list = ['a', 'b', 'c'] as const;
const list2 = ['d1', 'd2'] as const;
type combinedListType = listType<typeof list | typeof list2>; // 'a' | 'b' | 'c' | 'd1' | 'd2'

type listType<T extends string[]> = T[number];

const list = ['a', 'b', 'c'] as const;

const list2 = ['d1', 'd2'] as const;

type combinedListType = listType<typeof list | typeof list2>; // 'a' | 'b' | 'c' | 'd1' | 'd2'

У цьому прикладі ми використовуємо генерик listType, який приймає масив рядків і повертає об’єднаний тип всіх елементів цього масиву. Ми можемо використовувати цей генерик для об’єднання типів двох різних списків значень, отримуючи бажаний результат.

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