Тип против интерфейса в TypeScript

Тип и интерфейс — одна из самых запутанных и интересных вещей в TypeScript. Мы постараемся развеять эту путаницу.

TypeScript создан поверх JavaScript, который добавляет статические типы . Наличие типов — замечательная вещь для разработчиков. Писать шрифты будет сложно, но вы не пожалеете об этом в долгосрочной перспективе.

TypeScript имеет все основные типы, такие как числовой, строковый, логический и т. д. Наряду с базовым типом TypeScript позволяет нам создавать собственные типы и определять внешний вид объекта с помощью псевдонимов типов и интерфейсов. соответственно.

Псевдоним типа — это не что иное, как тип. Создание типа с произвольным именем (псевдонимом) делает его псевдонимом типа, не более того.

Давайте посмотрим на основной синтаксис интерфейсов и псевдонимов типов .

Базовый синтаксис

Интерфейсы

Интерфейсы будут объявлены с ключевым словом interface . Проверьте синтаксис интерфейсов ниже.

 interface InterfaceName { keyName: typeOfKey ... }

Взгляните на пример ниже.

 interface Site { name: string; url: string; pagesCount: number; } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Псевдонимы типов

Псевдонимы типов будут объявлены с использованием ключевого слова type . Проверьте синтаксис псевдонимов типов ниже.

 type TypeName = { keyName: typeOfKey; ... }

Взгляните на пример ниже.

 type Site = { name: string; url: string; pagesCount: number } const geekflare: Site = { name: 'Geekflare', url: 'https://geekflare.com/', pagesCount: 25 }

Мы создали тип для Site , используя интерфейс и псевдоним типа . Оба допустимы и могут использоваться для типов объектов, упомянутых в примерах. В приведенном выше примере отличается только синтаксис, что очевидно.

Давайте продолжим исследовать различия между ними, чтобы найти больше вещей.

Кортежи

Кортеж в TypeScript — это типизированный массив предопределенной длины. Он определяет типы каждого индекса.

Мы можем объявлять кортежи, используя псевдонимы типов. Но мы не можем сделать это с помощью интерфейсов. Давайте посмотрим, как это сделать с псевдонимами типов.

 type Site = [string, string, number] const geekflare: Site = ['Geekflare', 'https://geekflare.com/', 25]

В приведенном выше примере мы определили тип для каждого элемента индекса массива. Если мы укажем какой-то другой тип в массиве, TypeScript выдаст ошибку.

Разве мы не можем сделать это с помощью интерфейсов?

Мы не можем сделать это точно так же, как мы делаем это с псевдонимами типов. Интерфейсы используются для типов объектов. Итак, нам нужно иметь кортеж внутри объекта, чтобы использовать его в интерфейсах. Давайте посмотрим пример.

 interface Site { details: [string, string]; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Если вы видите код, у нас есть кортеж с именем details внутри интерфейса. Итак, мы можем использовать кортежи внутри интерфейсов.

Точно так же мы можем использовать псевдонимы типов для отдельных типов, таких как строка, число, логическое значение и т. д. Поскольку интерфейс используется для типов объектов, мы можем использовать его для отдельных типов, таких как псевдонимы типов.

Еще одна интересная вещь заключается в том, что мы можем использовать кортеж псевдонима типа в интерфейсах . Проверьте приведенный ниже пример.

 type Details = [string, string] interface Site { details: Details; pagesCount: number; } const geekflare: Site = { details: ['Geekflare', 'https://geekflare.com/'], pagesCount: 25, }

Давайте приступим к следующему.

Слияние объявлений — интерфейсы

Объединение объявлений — это использование TypeScript для объединения типов интерфейсов с одинаковыми именами. Давайте посмотрим на пример, чтобы получить больше ясности.

 interface Site { name: string; } interface Site { url: string; } interface Site { pagesCount: number; } const geekflare: Site = { name: 'Geeflare', url: 'https://geekflare.com/', pagesCount: 25, }

Если вы видите приведенный выше код, мы объявили интерфейс с одним и тем же именем 3 раза. Компилятор TypeScript скомпилирует все эти 3 формы в один тип объекта, который включает в себя все типы интерфейсов с одинаковыми именами.

Вы можете подтвердить слияние объявлений, удалив один ключ из объекта geekflare . Если вы удалите один из ключей от geekflare , вы увидите ошибку.

Мы не можем сделать то же самое с псевдонимами типов. Большинство людей не используют эту функцию. В общем, наличие нескольких интерфейсов с одним и тем же именем сбивает с толку.

Фанаты псевдонимов типа, не беспокойтесь об этой особенности интерфейсов.

Расширяет

Допустим, вы объявили тип. Теперь вы хотите объявить другой тип вместе с типами предыдущего типа. В этом случае мы можем расширить предыдущий тип. Мы можем сделать это как с интерфейсами, так и с псевдонимами типов .

Давайте посмотрим на них обоих.

Интерфейсы

Для этого варианта использования в TypeScript есть ключевое слово extends . Мы будем использовать его для расширения интерфейсов. Давайте проверим пример.

 interface Site { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Мы создали интерфейс Geekflare , расширив интерфейс Site . Все типы Site будут присутствовать в интерфейсе Geeflare вместе со своими собственными типами. Вы можете удалить ключ name из переменной geekflare , чтобы подтвердить это.

Мы можем расширить несколько интерфейсов следующим образом.

 interface FirstHalf { name: string; } interface SecondHalf { age: number } interface Person extends FirstHalf, SecondHalf { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Попробуйте расширить с более чем 2 интерфейсами для удовольствия. Мы также можем расширить псевдонимы типов с помощью интерфейса.

 type Site = { name: string; url: string; pagesCount: number; } interface Geekflare extends Site { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

В приведенном выше примере мы расширили только один тип. Вы можете расширить столько, сколько хотите, аналогично предыдущему примеру расширения нескольких интерфейсов.

Давайте посмотрим, как это сделать с псевдонимами типов.

Псевдонимы типов

Мы можем расширить псевдонимы типов, используя тип пересечения в TypeScript. Давайте посмотрим пример.

 type Site = { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Мы расширили тип Site с помощью founder для типа Geekflare , используя пересечение (&) . Вы можете проверить это, удалив один из ключей из переменной geekflare , что выдаст ошибку.

Подобно интерфейсам, мы можем расширить несколько типов следующим образом.

 type FirstHalf = { name: string; } type SecondHalf = { age: number } type Person = FirstHalf & SecondHalf & { profession: string } const person: Person = { name: 'Geekflare', age: 7, profession: 'Helping Techies' }

Мы также можем расширять интерфейсы с помощью псевдонимов типов так же, как интерфейсы, расширяющие псевдонимы типов. Проверьте пример ниже.

 interface Site { name: string; url: string; pagesCount: number; } type Geekflare = Site & { founder: string; } const geekflare: Geekflare = { name: 'Geekflare', url: 'http://geekflare.com/', pagesCount: 25, founder: 'Chandan' }

Попробуйте расширить комбинацию псевдонимов типов и интерфейсов.

Реализация

Это не разница между интерфейсами и псевдонимами типов. Просто особенность class знать.

Класс может одинаково реализовать как интерфейс, так и псевдоним типа. Давайте посмотрим на примеры для них обоих.

Интерфейсы

 interface Site { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Псевдонимы типов

 type Site = { name: string; url: string; pagesCount: number; } class Geekflare implements Site { name = 'Geekflare' url = 'http://geekflare.com/' pagesCount = 25 constructor() { console.log(this.name, this.url, this.pagesCount) } }

Примечание: следует помнить, что мы не можем реализовать типы объединения (|) или пересечения (&) с классами.

Заключительные слова

Как вы видите в статьях, мы можем делать все как с псевдонимами типов, так и с интерфейсами. Таким образом, мы не можем строго сказать, что один лучше другого. В конце концов, выбор одного из них является личным выбором каждого. Со временем вы выработаете свой стиль их использования.

Далее вы можете проверить Typescript и Javascript.

Счастливого кодирования