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?