В чем разница между Omit и Pick?

TypeScript Omit vs Pick: выбор утилиты типов

Отличный вопрос о TypeScript утилитах типов. Оба решают похожую задачу, но с разными подходами.

Основные различия

Pick - берешь ТОЛЬКО нужные поля (включающий подход):

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

type UserPreview = Pick<User, 'id' | 'name' | 'email'>;
// Результат:
// {
//   id: string;
//   email: string;
//   name: string;
// }

Omit - исключаешь ненужные поля (исключающий подход):

type UserWithoutPassword = Omit<User, 'password' | 'createdAt'>;
// Результат:
// {
//   id: string;
//   email: string;
//   name: string;
// }

Оба дают одинаковый результат, но логика противоположная.

Как они работают

// Как работает Pick
type Pick<T, K extends keyof T> = {
  [P in K]: T[P]
}

// Как работает Omit
type Omit<T, K> = Pick<T, Exclude<keyof T, K>>

// На самом деле Omit построен на основе Pick!

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

1. API Response без сенситивных данных

interface User {
  id: string;
  email: string;
  password: string;  // Не отправляем клиенту
  passwordHash: string;  // Не отправляем
  apiKey: string;  // Не отправляем
  name: string;
  avatar: string;
}

// Способ 1: Omit (исключаем плохие)
type PublicUser = Omit<User, 'password' | 'passwordHash' | 'apiKey'>;

// Способ 2: Pick (выбираем хорошие)
type PublicUser = Pick<User, 'id' | 'email' | 'name' | 'avatar'>;

Когда Pick лучше: когда много полей для исключения Когда Omit лучше: когда много полей, нужны 1-2 исключить

2. Props компонента

interface ButtonProps {
  variant: 'primary' | 'secondary';
  size: 'sm' | 'md' | 'lg';
  onClick: () => void;
  disabled: boolean;
  className: string;
  children: React.ReactNode;
  data-testid: string;
}

// Компонент Link использует большинство props Button
type LinkProps = Omit<ButtonProps, 'onClick'> & {
  href: string;
  target?: '_blank';
};

// Или можно выбрать: какой подход лучше?

3. Form Submit vs Form State

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  age: number;
  phone: string;
  address: string;
  notes: string;  // Не отправляем на сервер
  formStatus: 'idle' | 'loading' | 'error';  // Локальное состояние
  errorMessage: string;  // Локальное
}

// Что отправляем на сервер
type SubmitData = Omit<FormData, 'formStatus' | 'errorMessage' | 'notes'>;

// Или через Pick (если много не отправляем)
type SubmitData = Pick<FormData, 'firstName' | 'lastName' | 'email' | 'age' | 'phone' | 'address'>;

Правило выбора

// Если исключаешь 1-2 поля из 10
type Result = Omit<Original, 'field1' | 'field2'>;

// Если исключаешь 8 полей из 10
type Result = Pick<Original, 'field1' | 'field2'>;

Комбинация с другими утилитами

interface Product {
  id: string;
  name: string;
  price: number;
  description: string;
  image: string;
  stock: number;
}

// Для каталога нужны только название и цена
type CatalogItem = Pick<Product, 'name' | 'price'>;

// Для поиска исключаем изображение (большой файл)
type SearchResult = Omit<Product, 'image'>;

// Для админки нужны все кроме цены (читается из БД отдельно)
type AdminProduct = Omit<Product, 'price'>;

// Для редактирования - всё кроме ID (генерируется)
type EditProduct = Omit<Product, 'id'>;

Альтернативы и расширения

// TypeScript 5.0+ - более читаемый синтаксис
type Without<T, K extends keyof T> = Omit<T, K>;
type Only<T, K extends keyof T> = Pick<T, K>;

type A = Without<Product, 'price'>;
type B = Only<Product, 'name' | 'price'>;

Частые ошибки

// Ошибка 1: Забыли union
type Bad = Pick<User, 'id'>;  // ОК
type Bad = Pick<User, 'id', 'name'>;  // ОШИБКА! Нужна pipe
type Good = Pick<User, 'id' | 'name'>;  // Правильно

// Ошибка 2: Ключ не существует
type Bad = Pick<User, 'nonExistentField'>;  // ОШИБКА
// TypeScript покажет: Type 'nonExistentField' does not satisfy the constraint

// Ошибка 3: Слишком глубокая вложенность
type DeepBad = Pick<Pick<User, 'profile'>, 'firstName'>;
// Лучше: type Deep = Pick<User['profile'], 'firstName'>;

Performance соображения

// Pick и Omit работают одинаково быстро
// Компилятор их оптимизирует одинаково
// Выбор основан только на читаемости

// Читаемо: исключаем 2 из 8 полей
type Config = Omit<Options, 'internal' | 'debug'>;

// Нечитаемо: выбираем 6 из 8 полей
type Config = Pick<Options, 'a' | 'b' | 'c' | 'd' | 'e' | 'f'>;

Вывод

• Pick: используй когда нужны несколько полей (2-3) из больше количества
• Omit: используй когда исключаешь несколько полей из большего количества
• Практика: Omit часто более читаемая (описываем, что убираем)
• Оба: компилируются одинаково, выбирай по читаемости кода

В 10+ лет разработки я заметил, что Omit используется чаще, потому что часто ясно, что исключаем (sensitive data, internal fields), чем что включаем.