Утилітний тип pick у TypeScript

Pick — це утиліта типу в TypeScript, яка дозволяє "вибирати" конкретні пропси з існуючого типу або інтерфейсу. Вона створює новий тип, що включає лише ті поля, які ви явно вказали.

Синтаксис

Pick<T, K>

T - оригінальний тип або інтерфейс, з якого потрібно вибрати пропси.
K — об'єднання ключів, які ви хочете зберегти в результативному типі.

Pick бере лише вказані пропси K з T і ігнорує всі інші.

Коли використовувати Pick?

Якщо вам потрібно створити новий тип об'єкта з обмеженою кількістю властивостей.
Для API-запитів, коли не всі дані потрібно відправляти.
У пропсах React, коли компоненту потрібен лише конкретний набір даних.

Приклад використання Pick

Припустимо, у нас є інтерфейс User з кількома полями:

interface User {
  id: number;
  name: string;
  age: number;
  isAdmin: boolean;
}

Якщо нам потрібен тип, в якому ми хочемо зберігати тільки id та name, ми можемо використати Pick:

type BasicUserInfo = Pick<User, "id" | "name">;

const userInfo: BasicUserInfo = {
    id: 1,
    name: "Alice",
};

userInfo.age = 25;       
// Помилка: властивість 'age' відсутня в типі 'Pick<User, "id" | "name">'

BasicUserInfo містить тільки поля id та name.
Спроба доступу до age або isAdmin призведе до помилки компіляції, оскільки їх немає в результативному типі.

Приклад API

Коли ви отримуєте дані користувача з API, іноді ви хочете повернути назовні тільки мінімальний набір полів, не розкриваючи всю внутрішню структуру об'єкта. Наприклад:

interface User {
    id: number;
    name: string;
    email: string;
    passwordHash: string;
    isAdmin: boolean;
}

// Створити публічний профіль (тільки безпечна частина даних)
type PublicUserProfile = Pick<User, "id" | "name">;

function getPublicProfile(user: User): PublicUserProfile {
    return {
        id: user.id,
        name: user.name,
    };
}

Таким чином, функція getPublicProfile повертає лише ті поля id та name, які ми явно вказали в PublicUserProfile.

Чому Pick?

Зменшення типу: Якщо ви працюєте з великим інтерфейсом і в конкретному контексті потрібні лише кілька властивостей, Pick дозволяє уникнути дублювання коду при визначенні типів, повторно використовуючи існуючі структури.
Гнучкість: Дозволяє динамічно повторно використовувати загальні структури даних (наприклад, при роботі з API), вибираючи тільки потрібні поля для конкретної операції.
Контроль: Уникає випадкової передачі зайвих даних або небажаних властивостей.

Порівняння з Omit

Утиліта	Опис
`Pick<T, K>`	Залишає тільки вказані пропси `K` з `T`
`Omit<T, K>`	Виключає вказані пропси `K` з `T`, залишаючи решту

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

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

Premium

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

Дочитали статтю?

Практика завдань

Утилітний тип pick у TypeScript

#Синтаксис

#Коли використовувати Pick?

#Приклад використання Pick

#Приклад API

#Чому Pick?

#Порівняння з Omit