Казалось бы, такие похожие, на первый взгляд сущности в TypeScript, использование которых иногда пересекается, однако это совсем не так. В данной статье хочу рассмотреть различия между этими двумя сущностями в TypeScript.
Если Вам лень читать, то можете сразу посмотреть видео на данную тему:
Ну а если не лень, то продолжаем :)
1. Interface для объектов, а Type для различных типов
Если мы рассмотрим вариант использования этих сущностей для объектов, то в ряде случаев они взаимно заменяемы. Рассмотрим пример:
interface Interface1 {
name: string;
}
type Type1 = {
name: string;
}
В данном случае нет особой разницы, что использовать. Оба эти варианта подходят.
Однако, если мы будем говорить не об объектах, а о других сущностях, то тут не всё так однозначно. Для таких случаев мы должны использовать Type. Вот пара примеров:
type Type2 = (prop: string) => string;
type Type3 = string;
2. Расширение (extends) interface
Для interface существует такая функциональность, как расширение. Представим простой interface Animal, который будет обозначать животного:
interface Animal {
name: string;
}
У объекта, который реализует этот interface будет одно свойство - name. По сути, при желании мы можем назвать любое животной каким-то именем, так что это вполне оправдано.
Теперь рассмотрим расширение данного interface.
interface Dog extends Animal {
bark: () => void;
}
В данном случае мы создаём Interface Dog, который создаёт более конкретный тип животных - собак. И в нём мы реализуем метод bark - лай. Поскольку не все животные лают, а только собаки, то этот метод - специфическое свойство.
И давайте используем этот interface для создания объекта:
const dog: Dog = {
name: 'Бобик',
bark: () => console.log('Гав')
}
Как вы увидели из данного примера, interface имеет возможность создания повых interface на основе предыдущих.
3. Реализация (implements) interface
Поскольку interface - это сущность из ООП, то мы можем использовать её по назначению. Вот пример реализации:
interface Human {
name: string;
}
class Woman implements Human {
sex: string = 'woman';
name: string;
constructor(name: string) {
this.name = name;
}
}
Тут мы создали interface Human, который обозначает человека. И мы создаём class Woman. В данном контексте ясно, что Human не должен быть class, ибо люди либо мужчины, либо женщины. В то же время, interface не ограничивает нас в множественном наследовании. Мы могли создать ещё несколько interface для class Woman.
В случае с type такое невозможно, так как они не связаны напрямую с ООП.
Вывод
Исходя их всего описанного выше, хотя эти сущности и аналогичны на первый взгляд, однако это совсем не так. Используйте interface и type в соответствие с вашими задачами.
Мой Telegram канал: https://t.me/way_of_developer