Що робить Pick<T, K>?

TypeScriptJunior~1 хв читання

1. Що робить `Pick<T, K>`

Pick<T, K> - створює новий тип, що містить лише вказані поля K з вихідного типу T.

Синтаксис

javascript

Pick<SourceType, 'key1' | 'key2' | ...>

Приклад

javascript

interface User {
  id: number;
  name: string;
  email: string;
  age: number;
}

// створюємо тип лише з id і name
type UserPreview = Pick<User, 'id' | 'name'>;

Тепер UserPreview еквівалентний:

javascript

{
  id: number;
  name: string;
}

Інші поля (email, age) виключені.

2. Як вибрати лише потрібні поля з інтерфейсу

Просто передай імена потрібних властивостей другим аргументом (K):

javascript

type UserShort = Pick<User, 'name' | 'email'>;

const u: UserShort = {
  name: "Tim",
  email: "tim@example.com",
};

Можна вибрати одну або декілька властивостей, об'єднуючи їх через |.

3. Як `Pick` працює всередині

Вбудована реалізація виглядає так:

javascript

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
};

Розшифровка:

K extends keyof T - обмежує список ключів лише наявними в T;
[P in K] - створює новий об'єкт, що складається з обраних ключів;
T[P] - зберігає оригінальні типи властивостей.

4. Що станеться, якщо вказати неіснуюче поле

TypeScript одразу видасть помилку компіляції, тому що K повинно бути підмножиною ключів з T.

Приклад помилки

javascript

type Wrong = Pick<User, 'id' | 'nickname'>;
// Помилка: Type '"nickname"' is not assignable to keyof 'User'

TypeScript суворо перевіряє, що 'nickname' немає в User.

5. Застосування в реальних проєктах

Приклад 1. DTO або відповідь API

javascript

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
}

// безпечний тип без пароля
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;

Використовується, щоб обмежити набір властивостей перед поверненням даних.

Приклад 2. Preview-об'єкти

javascript

interface Product {
  id: number;
  title: string;
  description: string;
  price: number;
}

type ProductCard = Pick<Product, 'id' | 'title' | 'price'>;

Для картки товару не потрібні всі поля - лише базова інформація.

Приклад 3. Комбінування з іншими Utility Types

javascript

type OptionalName = Partial<Pick<User, 'name'>>;

Спочатку вибираємо потрібне поле (Pick), потім робимо його необов'язковим (Partial).

6. Ключова відмінність від `Omit<T, K>`

Утиліта	Що робить	Приклад
`Pick<T, K>`	Залишає вказані поля	`Pick<User, 'id'
`Omit<T, K>`	Виключає вказані поля	`Omit<User, 'password'>`

Підсумок

Питання	Відповідь
Що робить `Pick<T, K>`	Створює новий тип, що включає лише обрані властивості з `T`
Як вибрати потрібні поля	Вказати їх другим параметром (`'field1'
Що буде при неіснуючому полі	TypeScript видасть помилку компіляції (`"X" is not assignable to keyof T`)

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

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

Premium

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