Складні типи в TypeScript часто викликають початківців у розробників до паніки, але правильне розуміння умовних та mapped types дозволяє писати більш виразний та гнучкий код. Ігнорування цих можливостей призводить до надмірної повторюваності та низької підтримки коду, особливо у великих проєктах.
Контекст і чому це важливо
Умовні та mapped types – це потужні інструменти для створення типів, які динамічно генеруються на основі інших типів. Вони особливо корисні при роботі з бібліотеками, що використовують generics або коли потрібно трансформувати структуру існуючих типів. Наприклад, для генерації типів DTO на основі схем даних.
Неправильне використання або взагалі відсутність цих технік може призвести до дублювання коду, ускладнення розуміння логіки та збільшення ризику помилок. В проєктах з великою кількістю типів, це може збільшити час розробки на 20-30% через необхідність підтримки та рефакторингу.
Практична реалізація
Створимо тип, який генерує поле `id` у об’єктах, якщо вхідний тип має властивість `name`.
type WithId<T> = {
id: string;
} & T;
type User = {
name: string;
email: string;
};
type Product = {
title: string;
price: number;
};
type UserWithId = WithId<User>;
// Тип: { id: string; name: string; email: string; }
type ProductWithId = WithId<Product>;
// Тип: { id: string; title: string; price: number; }
type GenericArray<T> = T[];
type UserArray = GenericArray<UserWithId>;
Цей код демонструє, як mapped type `WithId` додає поле `id` до будь-якого типу `T`. Тип `UserWithId` отримує поле `id`, а `ProductWithId` також отримує `id`, оскільки обидва типи `User` та `Product` використовуються з `WithId`.
Використання умовного типу
Покращимо попередній приклад, щоб поле `id` генерувалося лише тоді, коли вхідний тип має властивість `name`.
type WithIdConditional<T> = T extends { name: string } ? { id: string } & T : T;
type User = {
name: string;
email: string;
};
type Product = {
title: string;
price: number;
};
type UserWithId = WithIdConditional<User>;
// Тип: { id: string; name: string; email: string; }
type ProductWithId = WithIdConditional<Product>;
// Тип: { title: string; price: number; } - id не додано
Умовний тип `WithIdConditional` перевіряє, чи має тип `T` властивість `name`. Якщо так, до типу додається поле `id`. Це робить код більш гнучким, дозволяючи уникнути додавання `id` до типів, де це не потрібно.
Поширені помилки та підводні камені
- Неправильне використання `&` (Intersection): Неправильне поєднання типів може призвести до непередбачуваних результатів. Наприклад, `type A = { a: string } & { b: number }` створить тип, який вимагає обидві властивості `a` та `b`, що може призвести до помилок під час компіляції.
- Занадто складні умовні типи: Надмірно складні умови можуть ускладнити читабельність коду. По можливості, розбивайте складні умови на менші, більш зрозумілі частини.
- Забування про `extends`: При використанні умовних типів, важливо правильно використовувати `extends`, щоб перевіряти наявність властивостей або типів. Неправильне використання може призвести до помилок компіляції або неправильної роботи коду.
Порівняння підходів
Раніше, для додавання поля `id` до всіх об’єктів, доводилось вручну створювати нові типи для кожного випадку. Це займало багато часу і робило код менш гнучким.
Використання mapped type та умовних типів дозволяє автоматизувати цей процес, зменшуючи кількість коду на 50% та підвищуючи гнучкість, оскільки поле `id` генерується лише для об’єктів, які мають властивість `name`.
Висновки
Умовні та mapped types – це не просто “фічі” TypeScript, а важливі інструменти для написання чистого, гнучкого та підтримуваного коду. Почніть використовувати їх у невеликих проєктах, щоб отримати практичний досвід. Спробуйте переписати існуючий код, використовуючи ці техніки, щоб відчути їхню перевагу.