Pull to refresh

Разница между Type и Interface в TypeScript

Level of difficultyEasy

Казалось бы, такие похожие, на первый взгляд сущности в 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

Tags:
Hubs:
You can’t comment this publication because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author’s username will be hidden by an alias.