10 апр 2024 в 00:49

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

Простой

Ожидает приглашения

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

Хабы: