Interface vs Type — в чём разница?

JuniorTypeScript #typescript #interfaces

Вопрос

В чём разница между interface и type в TypeScript и что выбрать?

Короткий ответ

В большинстве повседневных случаев они взаимозаменяемы. Ключевые различия: interface можно дополнять (declaration merging) и она заточена под описание формы объектов, а type умеет описывать union, tuple, примитивы и вычисляемые типы.

Подробный ответ

Что может только type:

type Status = 'idle' | 'loading' | 'error' // union
type Point = [number, number]              // tuple
type ID = string | number                  // алиас примитива

Что может только interface:

interface Window {
  myGlobal: string // declaration merging — TS объединит с существующим Window
}

Оба поддерживают расширение:

interface Animal { name: string }
interface Dog extends Animal { breed: string }

type Animal2 = { name: string }
type Dog2 = Animal2 & { breed: string }

Практическая рекомендация: для публичных API объектов/классов, которые можно расширять — interface. Для union-типов, кортежей и сложных трансформаций — type. Многие команды просто выбирают interface по умолчанию для объектов и type для всего остального.

Пример

interface Props {
  title: string
  onClose?: () => void
}

type ButtonVariant = 'primary' | 'secondary' | 'ghost'

interface ButtonProps extends Props {
  variant: ButtonVariant
}

Дополнительные вопросы

  • Что такое declaration merging и когда оно полезно?
  • Можно ли расширить type через interface и наоборот?
  • Как TypeScript обрабатывает циклические ссылки в interface и type?