Что такое Partial в TypeScript?

Partial в TypeScript

Partial — это встроенный утилитарный тип в TypeScript, который делает все свойства интерфейса или типа необязательными (optional). Это очень полезно при работе с обновлениями объектов, где не нужно передавать все поля.

Синтаксис и основное определение

// Partial<T> - все свойства становятся необязательными
type Partial<T> = {
  [P in keyof T]?: T[P];
};

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

Пример 1: Обновление пользователя

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

// Без Partial - нужно передать ВСЕ поля
function updateUserFull(user: User): void {
  // Должны указать все свойства
}

// С Partial - можно передать только нужные поля
function updateUserPartial(updates: Partial<User>): void {
  // Можем обновить только name и email
}

// Использование
updateUserPartial({ name: 'John' }); // OK
updateUserPartial({ email: 'john@example.com' }); // OK
updateUserPartial({ name: 'John', age: 30 }); // OK
updateUserPartial({ name: 'John', email: 'john@example.com', age: 30 }); // OK

Пример 2: React компонент с props

interface ButtonProps {
  variant: 'primary' | 'secondary';
  size: 'small' | 'medium' | 'large';
  disabled: boolean;
  onClick: () => void;
  children: string;
}

// Функция для создания баттона с дефолтными значениями
function createButton(props: Partial<ButtonProps>): ButtonProps {
  return {
    variant: props.variant || 'primary',
    size: props.size || 'medium',
    disabled: props.disabled ?? false,
    onClick: props.onClick || (() => {}),
    children: props.children || 'Button'
  };
}

// Использование - можем передать только нужные значения
const button = createButton({ variant: 'secondary', size: 'large' });

Пример 3: Конфигурация с дефолтами

interface AppConfig {
  apiUrl: string;
  timeout: number;
  retries: number;
  logLevel: 'debug' | 'info' | 'error';
  cache: boolean;
}

const defaultConfig: AppConfig = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
  logLevel: 'info',
  cache: true
};

function createConfig(overrides: Partial<AppConfig>): AppConfig {
  return { ...defaultConfig, ...overrides };
}

// Переопределяем только нужные значения
const customConfig = createConfig({
  apiUrl: 'https://custom-api.com',
  logLevel: 'debug'
});

Реальные сценарии использования

Сценарий 1: API операции (PATCH запрос)

interface Post {
  id: string;
  title: string;
  content: string;
  published: boolean;
  views: number;
}

// PATCH /posts/:id - обновляем только некоторые поля
async function updatePost(postId: string, updates: Partial<Post>): Promise<Post> {
  const response = await fetch(`/api/posts/${postId}`, {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(updates) // Отправляем только переданные поля
  });
  return response.json();
}

// Использование
await updatePost('post-1', { title: 'New Title', published: true });
await updatePost('post-2', { views: 100 }); // Обновили только views

Сценарий 2: Форма с необязательными полями

interface ProfileFormData {
  firstName: string;
  lastName: string;
  bio: string;
  avatar: string;
  website: string;
}

// Используем Partial чтобы разрешить неполные формы
function validateProfileForm(data: Partial<ProfileFormData>): boolean {
  // Даже если некоторые поля не заполнены, это OK
  if (data.firstName && data.firstName.length < 2) {
    return false;
  }
  if (data.lastName && data.lastName.length < 2) {
    return false;
  }
  return true;
}

// Пользователь может заполнить только firstName
validateProfileForm({ firstName: 'John' }); // true

Сравнение Partial с другими подходами

Без Partial - неудобно:

interface Product {
  name: string;
  price: number;
  description: string;
}

// Приходится делать все поля optional
interface ProductUpdate {
  name?: string;
  price?: number;
  description?: string;
}

function updateProduct(updates: ProductUpdate) { }

С Partial - чище и DRY:

function updateProduct(updates: Partial<Product>) { }
// Не дублируем интерфейс

Комбинирование Partial с другими утилитарными типами

interface Article {
  id: string;
  title: string;
  content: string;
  author: string;
  published: boolean;
}

// Partial + Pick = выбрать несколько опциональных полей
type ArticlePreview = Partial<Pick<Article, 'title' | 'content'>>;
const preview: ArticlePreview = { title: 'Hello' }; // OK

// Partial + Omit = все опциональные кроме определённых
type ArticleWithoutId = Partial<Omit<Article, 'id'>>;
const article: ArticleWithoutId = { title: 'News' }; // OK

// Partial + Record для object с optional значениями
type PartialSettings = Partial<Record<'theme' | 'language' | 'notifications', string>>;
const settings: PartialSettings = { theme: 'dark' }; // OK

Когда НЕ использовать Partial

// Плохо - Partial скрывает обязательные поля
interface User {
  id: string; // ID ВСЕГДА должен быть!
  name: string;
  email: string;
}

function saveUser(user: Partial<User>) { } // Опасно! ID может отсутствовать

// Хорошо - явно указать какие поля опциональны
function updateUser(id: string, updates: Partial<Omit<User, 'id'>>) { }
// Или
function updateUser(id: string, updates: { name?: string; email?: string }) { }

Производительность

Partial — это compile-time утилита TypeScript, не влияет на производительность runtime. Она просто помогает типизации.

// TypeScript помогает при разработке:
function update(data: Partial<User>) {
  console.log(data.name); // OK - может быть undefined
  console.log(data.name.toUpperCase()); // Ошибка типа!
  // Нужна проверка: data.name?.toUpperCase()
}

Вывод

Partial — это мощный инструмент для:

• Обновления объектов (PATCH запросы)
• Форм с опциональными полями
• Конфигураций с дефолтами
• Избежания дублирования интерфейсов
• Улучшения DRY принципа

Это один из самых часто используемых утилитарных типов в TypeScript вместе с Pick, Omit и Record. Правильное применение Partial делает код более гибким и типобезопасным.