Что такое Pick Type?

Pick Type в TypeScript

Pick — это встроенный утилитарный тип в TypeScript, который позволяет создать новый тип, выбрав определенные свойства из существующего типа. Это мощный инструмент для создания подтипов без дублирования кода.

Синтаксис

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

Где:

• T — исходный тип
• K — ключи свойств, которые нужно выбрать

Примеры использования

Пример 1: Выбор конкретных свойств объекта

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

// Создаем тип только с публичной информацией
type UserPublicInfo = Pick<User, "id" | "name" | "email">;

// Эквивалентно:
type UserPublicInfo = {
  id: number;
  name: string;
  email: string;
};

Пример 2: Передача данных в API

interface Product {
  id: string;
  name: string;
  description: string;
  price: number;
  inventory: number;
  internalNotes: string;
}

// Данные, которые отправляем на фронтенд
type ProductDTO = Pick<Product, "id" | "name" | "description" | "price">;

// Функция, принимающая DTO
function displayProduct(product: ProductDTO) {
  console.log(`${product.name}: $${product.price}`);
}

Пример 3: Части формы

interface CreateUserForm {
  username: string;
  email: string;
  password: string;
  confirmPassword: string;
  termsAccepted: boolean;
  privacyAccepted: boolean;
}

// Основные поля для валидации
type UserCredentials = Pick<CreateUserForm, "username" | "email">;

// Поля для проверки согласий
type UserConsents = Pick<CreateUserForm, "termsAccepted" | "privacyAccepted">;

function validateCredentials(creds: UserCredentials): boolean {
  return creds.username.length > 3 && creds.email.includes("@");
}

Различия с другими утилитарными типами

Pick vs Omit

interface Article {
  id: string;
  title: string;
  content: string;
  author: string;
  createdAt: Date;
  updatedAt: Date;
}

// Pick — выбираем нужное
type ArticlePreview = Pick<Article, "id" | "title" | "author">;

// Omit — исключаем ненужное
type ArticlePreview = Omit<Article, "content" | "createdAt" | "updatedAt">;

// Оба варианта приводят к одному результату, но Pick более явный

Pick vs Partial

// Pick выбирает свойства, но они остаются обязательными
type PickedUser = Pick<User, "name" | "email">;
// { name: string; email: string; } — оба обязательны

// Partial делает все свойства необязательными
type PartialUser = Partial<User>;
// { id?: number; name?: string; ... } — все опциональны

// Комбинируем: выбираем и делаем опциональными
type PartialPickedUser = Partial<Pick<User, "name" | "email">>;
// { name?: string; email?: string; }

Практические примеры

Работа с React props

interface ButtonProps {
  variant: "primary" | "secondary";
  size: "sm" | "md" | "lg";
  disabled: boolean;
  loading: boolean;
  onClick: (e: React.MouseEvent) => void;
  children: React.ReactNode;
  className: string;
  dataTestId: string;
}

// Выбираем только визуальные свойства для UI-компонента
type ButtonStyleProps = Pick<ButtonProps, "variant" | "size" | "disabled">;

// Выбираем только функциональные свойства
type ButtonEventProps = Pick<ButtonProps, "onClick" | "disabled" | "loading">;

function renderButtonStyles(props: ButtonStyleProps): CSSProperties {
  // Реализация
}

Типизация ответа API

interface UserDatabase {
  id: string;
  name: string;
  email: string;
  password_hash: string;
  phone: string;
  address: string;
  role: string;
  last_login: Date;
  is_active: boolean;
}

// API возвращает только некоторые поля
type UserAPIResponse = Pick<UserDatabase, "id" | "name" | "email" | "role">;

api.get<UserAPIResponse>("/users/me");

Преимущества Pick

• Переиспользование типов: не нужно переписывать интерфейсы
• Безопасность типов: ошибки выловятся на этапе компиляции
• Явность: ясно, какие поля используются
• Легкость рефакторинга: изменения в исходном типе автоматически распространяются
• Разделение ответственности: разные части кода могут использовать разные подмножества свойств

Pick — один из самых часто используемых утилитарных типов в TypeScript благодаря своей простоте и практичности.