Как лучше типизировать props компонента: через type или interface?

В TypeScript есть два способа описать форму объекта: interface и type. Для типизации props React-компонента оба подхода дают одинаковый результат с точки зрения проверки типов, но у них есть различия в возможностях и сценариях применения.

Ключевые различия

• interface поддерживает declaration merging — можно объявлять одно и то же имя несколько раз, и определения объединятся.
• interface можно расширять через extends, что удобно для наследования пропсов.
• type умеет описывать union, intersection, tuples, mapped и conditional types.
• type нельзя переоткрыть, но можно комбинировать через &.

Пример с interface

interface ButtonProps {
  label: string;
  onClick: () => void;
}

interface IconButtonProps extends ButtonProps {
  icon: string;
}

function Button({ label, onClick }: ButtonProps) {
  return <button onClick={onClick}>{label}</button>;
}

Пример с type

type ButtonProps = {
  label: string;
  onClick: () => void;
};

type IconButtonProps = ButtonProps & { icon: string };

type Variant = 'primary' | 'secondary';

Для props обычно достаточно простого объекта, поэтому оба варианта эквивалентны. Однако если нужен union (например, variant: 'primary' | 'secondary') или сложные вычисляемые типы, type предпочтительнее. Если планируется расширение через extends или declaration merging (например, для сторонних библиотек), лучше подходит interface.

Рекомендации сообщества

• React + TypeScript: официальный шаблон CRA и многие гайды используют interface для props.
• ESLint-правило @typescript-eslint/consistent-type-definitions позволяет зафиксировать единый стиль.
• Не смешивайте оба подхода хаотично — выберите один и следуйте ему.

Итог: для типизации props в React выбирайте interface, если нужны расширение и единообразие, и type, если требуются union или сложные типы. Функционально они почти равнозначны, поэтому важнее консистентность в проекте.