Skip to main content
Практика завдань

Утилітарний тип extract у TypeScript

Extract — це утиліта типу в TypeScript, яка витягує з об'єднання типу ті члени, які можуть бути присвоєні іншому вказаному типу. По суті, вона створює нове об'єднання, залишаючи лише "перетинаючі" частини.

Синтаксис

ts
Extract<T, U>
  • T — оригінальний тип об'єднання.
  • U — тип (або об'єднання), члени якого повинні бути збережені з T.

Extract<T, U> зберігає в T лише ті типи, які можуть бути присвоєні U, видаляючи все інше.

Коли використовувати Extract

  1. Витягування дійсних значень: наприклад, якщо API може повернути "success" | "error" | "pending", ви можете витягнути лише "error".
  2. Фільтрація за ролями та доступом: з переліку всіх ролей ви можете витягнути лише адміністраторів (Extract<Role, "admin" | "moderator">).
  3. Оптимізація типу об'єднання: коли потрібно зберегти лише значення конкретного типу.
  4. Спрощення роботи з генераками: якщо до шаблону передається великий список варіантів, Extract допомагає звузити його до потрібних значень.

Приклади

Приклад 1. Витягування чисел та булевих значень

ts
type Mixed = string | number | boolean; // Витягнути лише числа та булеві значення type OnlyNumbersOrBooleans = Extract<Mixed, number | boolean>; // OnlyNumbersOrBooleans = number | boolean
  • В оригінальному типі Mixed є string, number та boolean.
  • Extract залишає лише ті типи, які є number або boolean.

Приклад 2. Приклад API: Фільтрація помилок

ts
type ApiResponse = | { status: "success"; data: string } | { status: "error"; message: string } | null | undefined; // Витягнути лише помилки type ErrorResponse = Extract<ApiResponse, { status: "error" }>; function handleError(response: ApiResponse) { if (response && response.status === "error") { console.log("Error:", response.message); } } // Використання: const res1: ApiResponse = { status: "success", data: "OK" }; const res2: ApiResponse = { status: "error", message: "Request error" }; handleError(res1); // Нічого не виводить handleError(res2); // Вивід: "Error: Request error"

Що тут відбувається?

  1. Extract<ApiResponse, { status: "error" }> залишає лише ті об'єкти, у яких статус: "error".
  2. Ми використовуємо це для обробки помилок, ігноруючи успішні відповіді та null | undefined.
  3. Функція handleError перевіряє, чи є відповідь помилкою, і виводить повідомлення.

Це більш реалістичний випадок, оскільки обробка відповідей API є частим завданням у фронтенд-розробці. 🚀

Відмінність від Exclude

УтилітаОпис
Exclude<T, U>Виключає всі підтипи з T, які сумісні з U
Extract<T, U>Залишає лише підтипи з T, які сумісні з U

Приклад:

ts
type Mixed = string | number | boolean; type OnlyStrings = Exclude<Mixed, number | boolean>; // string type OnlyNumbersOrBooleans = Extract<Mixed, number | boolean>; // number | boolean

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?
Практика завдань
Назад
Далі