Розробка програмного забезпечення часто вимагає створення універсальних рішень, які можна використовувати в різних контекстах. У TypeScript, зокрема, це може бути досягнуто за допомогою узагальнених типів та інтерфейсів. У цій статті ми розглянемо, як створити загальне реалізування узагальненого інтерфейсу, щоб застосувати принцип DRY (Don’t Repeat Yourself) у випадку, коли маємо декілька реалізацій одного інтерфейсу, відмінних лише типом даних.

Почнемо з постановки проблеми. Нехай маємо узагальнений інтерфейс SomeInterface<Data = unknown>, і нам потрібно створити декілька реалізацій цього інтерфейсу, які відрізняються лише вказівкою конкретного типу даних. Наприклад, використовуючи бібліотеку React-Virtuoso, ми хочемо мати кілька компонентів таблиць, таких як VirtuosoTableComponents_booklists і VirtuosoTableComponents_books. Замість того, щоб оголошувати кожен компонент окремо, ми хотіли б мати загальне рішення, яке об’єднає всі спільні частини.

Для досягнення цієї мети ми можемо використати узагальнені класи, інтерфейси та вирази в TypeScript. Давайте розглянемо конкретний приклад. У нашому випадку ми маємо два типи даних: BookList та Book, які ми використовуємо для створення таблиць.

Для спрощення коду та забезпечення його повторного використання ми створюємо загальну функцію VirtuosoTableComponents<T>(), яка повертає компоненти таблиці для заданого типу даних. Ця функція використовує узагальнені типи та вирази React для створення компонентів Scroller, Table, TableHead, TableRow та TableBody, які можуть бути використані для будь-якого типу даних.

Після створення загального реалізування узагальненого інтерфейсу ми можемо легко створювати різні компоненти таблиць, передаючи тип даних як параметр до функції VirtuosoTableComponents. Наприклад, для створення компонентів для списків книг ми можемо викликати VirtuosoTableComponents_booklists: TableComponents<BookList> = VirtuosoTableComponents<BookList>().

Використовуючи такий підхід, ми дотримуємося принципу DRY, оскільки уникнули дублювання коду для створення компонентів таблиць. Тепер, якщо ми хочемо змінити спосіб, яким створюються ці компоненти, нам потрібно буде зробити зміни тільки в одному місці – у функції VirtuosoTableComponents.