Интерфейсы и типы TypeScript: в чём разница

14 апреля 2023

Помимо базовых типов, TypeScript предоставляет разработчикам операторы для определения интерфейсов (interface) и псевдонимов для типов (type). В актуальных версиях TypeScript эти операторы во многих случаях взаимозаменяемы. Может сложиться впечатление, что кроме написания никаких различий между ними нет. На самом деле это не так. Разберёмся на примерах.

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

Оператор type позволяет определить новый псевдоним для существующего типа. Слово «псевдоним» используется неслучайно. Оператор фактически добавляет дополнительное имя для существующего типа. Новый тип данных при этом не создаётся. Взгляните на пример:

type OrderNumber = string;

Мы определили псевдоним типа OrderNumber. Фактически это дополнительное имя для типа string. При объявлении переменной типа OrderNumber, нам не придётся делать каких-то преобразований при попытке записать в неё строковое значение. Ведь OrderNumber — дополнительное имя для типа string:

const myOrderNumber: OrderNumber = '31337';

Запомните, оператор type не создаёт новый тип, а добавляет псевдоним. Мы специально делаем на этом акцент, так как в различной литературе и статьях при обсуждении оператора type используют словосочетание «новый тип». Это сделано для удобства повествования. Фактически новый тип не создаётся.

⭐ Узнайте больше о теории типов, научитесь на практике использовать аннотацию типов и обобщённое программирование на профессиональном курсе.

Изучить TypeScript

Взаимозаменяемость

Во многих ситуациях type и interface взаимозаменяемы. Неважно каким оператором воспользуетесь, больших отличий сразу не заметите. С одной стороны — это хорошо, с другой вводит путаницу. Рассмотрим на примере определение псевдонима типа для описания заказа в импровизированном интернет-магазине. С точки зрения кода, заказ удобно описать в виде объекта определённой формы. Воспользуемся псевдонимами типов:

type Order = {
  id: string;
  createdAt: Date;
  items: string[];
}

const myOrder: Order = {
  id: '31337',
  createdAt: new Date(),
  items: ['orange', 'banana'],
}

Сначала мы определяем псевдоним типа, а затем демонстрируем его применение.

Объект myOrder должен соответствовать структуре Order и если забыть определить какое-то свойство, компилятор сразу напомнит об этом.

Аналогичного результата можно добиться при помощи интерфейсов. Вместо оператора type воспользуемся interface:

interface Order {
  id: string;
  createdAt: Date;
  items: string[];
}

Пример, где определяется объект заказа типа Order остаётся без изменений. Получается, что одну и ту же задачу мы решили разными способами. Какому оператору отдавать предпочтение? В последних версиях TypeScript грань между операторами interface и type стала тонкой (пример выше хорошо иллюстрирует это), но разница всё же есть.

Слияние интерфейсов

Интерфейсы поддерживают декларативное слияние, а псевдонимы типов нет. Объявив два или более интерфейса с одинаковыми идентификаторами (именами), мы получим один общий интерфейс:

interface Order {
  id: string;
  createdAt: Date;
  items: string[];
}

interface Order {
  status: string;
}

interface Order {
  owner: string;
}

const myOrder: Order = {
  id: '31337',
  createdAt: new Date(),
  items: ['orange', 'banana'],
  status: 'created',
  owner: 'Michael Jackson',
}

Мы определили три интерфейса с одинаковым идентификатором (Order), а затем воспользовались им для определения нового заказа. Обратите внимание, это полностью валидный код. Никаких ошибок о дублировании идентификатора нет. TypeScript выполнил слияние и на выходе получился один интерфейс Order.

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

А что на счёт псевдонимов? Они так не умеют. При определении двух псевдонимов с одинаковыми идентификаторами (именами) возникнет ошибка: «Duplicate identifier Order».

Типы пересечения

При разработке на TypeScript часто возникает необходимость комбинировать различные типы. Один из вариантов комбинации — пересечение типов. Результатом пересечения становится тип с общими характеристиками типов, участвующих в пересечении.

Если сказать проще, при пересечении типов A и B, мы получим тип C. Ему соответствуют значения, которые одновременно принадлежат к типам A и B, то есть обладают обязательными характеристиками каждого типа.

В TypeScript эту задачу решает оператор амперсанд (&). Рассмотрим на примере.

type OrderIdentifier = {
  id: string;
}

type OrderStatus = {
  status: string;
}

type Order = OrderIdentifier & OrderStatus;

За счёт пересечения мы получаем новый тип Order. Он объединяет общие характеристики типов OrderIdentifier и OrderStatus. Получить новый тип пересечения возможно и на основании интерфейсов:

interface OrderIdentifier {
  id: string;
}

interface OrderStatus {
  status: string;
}

type Order = OrderIdentifier & OrderStatus;

Результат выполнения этого кода не отличается от предыдущего. Однако, при объединении интерфейсов мы получаем тип пересечения Order. Обратите внимание, мы получаем именно тип пересечения, а не интерфейс. Получить новый интерфейс пересечения не получится. Это ещё одно отличие между type и interface.

Типы объединения

Псевдонимы типов можно объединять. В результате объединения получается новый тип. Новый тип содержит всё что есть в типах, участвующих в объединении. Для объединения применяется оператор |. Рассмотрим на примере:

type Dog = {
  bark: () => void;
}

type Cat = {
  meow: () => void;
}

type Animal = Dog | Cat;

// Собака Гуффи
const goofy: Dog = {
  bark() {
    console.log('bark');
  }
}

// Кот Том
const tom: Cat = {
  meow() {
    console.log('meow');
  }
}


// Animal подойдёт для кошек
let animal: Animal = tom;

//  и для собак
animal = goofy;

Объединять можно не только псевдонимы, но и интерфейсы. Принцип тот же, что и при пересечении. Результатом станет новый псевдоним типа, объединяющий интерфейсы. Получить новый интерфейс в результате объединения не получится.

Интерфейсы и классы

Интерфейсы особенно удобны при использовании объектно-ориентированного подхода. Сначала проектируется интерфейс, а потом классы, которые его имплементируют. Для этого в TypeScript есть отдельная синтаксическая конструкция implements. Рассмотрим на примере:

interface Cat {
  meow: () => void;
}

class Tiger implements Cat {
  meow() {
    console.log('meow-meow-bark');
  }
}

Мы описали интерфейс Cat, а затем определили класс Tiger. Этот класс реализует интерфейс Cat. Обратите внимание на ключевое слово implements. Приведённый пример кода ещё одна демонстрация, что интерфейс можно заменить на псевдоним типа. Например, так:

type Cat = {
  meow: () => void;
}

Классы могут имплементировать псевдоним типа, поэтому пример с определением класса Tiger остаётся актуальным, а мы опять увидели взаимозаменяемость type и interface.

Пожалуй, можно переходить к следующему разделу, но у интерфейсов есть ещё один козырь в рукаве. Интерфейсы поддерживают наследование. Работает это точно так же, как и в классах. При наследовании интерфейсов применяется оператор extends:

interface Cat {
  meow: () => void;
}

interface FastCat extends Cat {
  run: () => void;
}

class Tom implements FastCat {
  meow() {
    console.log('meow');
  }

  run() {
    console.log('run');
  }
}

Интерфейс FastCat наследуется от интерфейса Cat. Таким образом, интерфейс FastCat включает всё, что есть в определении Cat. При имплементации интерфейса FastCat, класс должен реализовать оба метода meow и run.

Это ещё не всё. В качестве родителя для интерфейса может выступать класс. Новый интерфейс будет содержать поля и методы класса, а также то, что разработчик добавит в интерфейс. Наследуя интерфейс от класса, помните, что класс в этом случае не должен содержать приватных полей. Рассмотрим пример:

class Animal {
 walk() {
   console.log('walk');
 }

 run() {
   console.log('run');
 }
}

// Интерфейс включает методы
// класса Animal
interface Cat extends Animal {
  meow: () => void;
}

class HomeCat implements Cat {
  walk() {
    console.log('Cat can walk');
  }

  run() {
    console.log('Cat can run');
  }

  meow() {
    console.log('meow');
  }
}

Рассматривать пример следует с описания класса Animal. Обычный класс с двумя методами: walk и run. Затем мы определяем новый интерфейс Cat. Он наследуется от класса Animal, следовательно, новый интерфейс Cat включает контракт для методов walk, run (результат наследования) и meow.

Для проверки интерфейса определяем новый класс HomeCat. Он имплементирует интерфейс Cat, который в свою очередь наследуется от класса Animal. Это означает, что класс HomeCat должен имлементировать все три метода.

Псевдонимы типов не поддерживают наследования. Оно возможно только с интерфейсами. Это ещё одно различие между этими конструкциями.

Кортежи

TypeScript поддерживает кортежи. Кортеж — упорядоченный набор фиксированной длины. Кортежи похожи на массивы, даже синтаксис используется такой же. Но в отличии от последних, кортеж не может динамически расширяться, и типы значений, а также их количество известны заранее. В следующем примере объявляем новый кортеж Developer:

type Developer = [string, string, number];
const ivan: Developer = ['Ivan', 'Ivanov', 33];

Объявить новый кортеж с помощью interface нельзя. Это ещё одна ситуация, когда операторы не взаимозаменяемы. Стоит добавить, что внутри интерфейса определять кортежи можно:

interface Developer {
  name: string;
  top2skill: [string, string];
}

const ivan: Developer = {
  name: 'Ivan',
  top2skill: ['run', 'sing'],
}

Резюме

Во многих случаях операторы type и interface взаимозаменяемы. Мы убедились в этом на практике. Мы рассмотрели несколько ситуаций, когда поведение отличается и использование одного оператора вместо другого невозможно. А что делать с ситуациями, когда допустимы оба оператора?

Дать объективный ответ на этот вопрос сложно. Всё зависит от нескольких «но» и взглядов разработчика. Уместны оба варианта. Однако, мы рекомендуем по умолчанию применять type. Оператор interface актуален во время применения объектно-ориентированного подхода, а также при создании библиотек и готовых пакетов с компонентами.

В случае с ООП всё относительно понятно: интерфейсы часть этого мира. Фраза «реализовать интерфейс» разработчику привычней по сравнению с «реализовать тип». С этим трудно поспорить. К тому же вы помните про наследование интерфейсов. Эта возможность может оказаться полезной.

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

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

Как работает navigator.credentials: API для входа без пароля

navigator.credentials — это интерфейс Web Authentication API, который позволяет браузеру управлять учётными данными пользователя. С его помощью можно безопасно получать, сохранять и автоматически подставлять данные для входа: пароли, токены или ключи. Это делает процесс аутентификации проще и безопаснее — особенно на сайтах, где важен пользовательский опыт и скорость входа.

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

Как это работает

Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Вы можете запросить сохранённые данные с помощью navigator.credentials.get(). Например, при загрузке страницы входа можно попытаться автоматически получить логин и пароль пользователя, если он ранее их сохранил:

const cred = await navigator.credentials.get({
  password: true,
  mediation: 'optional' // чтобы не мешать потоку, если данных нет
});

if (cred) {
  console.log('Получен логин:', cred.id);
  console.log('Пароль:', cred.password);
  // Здесь можно автоматически отправить данные на сервер
}

Если учётные данные доступны, вы можете использовать их для входа без дополнительных действий от пользователя. Это особенно удобно на мобильных устройствах и в приложениях с частыми сессиями.

Можно ли сохранять логин и пароль вручную?

Да, через navigator.credentials.store() вы можете сохранить учётные данные, которые пользователь только что ввёл:

const cred = new PasswordCredential({
  id: 'user@example.com',
  password: '12345678'
});

await navigator.credentials.store(cred);

Теперь при следующем визите вы сможете использовать get(), чтобы получить эти данные без необходимости ручного ввода.

Безопасность

API работает только на HTTPS и требует, чтобы страница была в фокусе. Браузеры могут показывать уведомления, если данные используются без явного действия пользователя — это защита от скрытых запросов.

Поддержка и ограничения

Поддерживается в Chrome, Edge, Android WebView.
Safari и Firefox поддерживают только часть API или вовсе не поддерживают.
Нельзя использовать на сторонних сайтах (только собственный домен).

Это API особенно хорошо подходит для проектов, где важна быстрая авторизация и нет смысла постоянно спрашивать логин-пароль у пользователя.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

3 августа 2025

Как использовать cause для более понятной обработки ошибок в JavaScript

Новое свойство cause в объекте error позволяет узнать исходную причину сбоя и облегчить отладку, особенно при повторении ошибок. Оно помогает выстроить цепочку событий и лучше понимать, где возникла проблема. Свойство доступно в Baseline в статусе «Widely Available» с 20 марта 2024 года.

3 августа 2025

HTTP/3: зачем он нужен и как понять, что он работает

HTTP/3 — это новая версия протокола обмена данными между браузером и сервером. В отличие от предыдущих HTTP/1.1 и HTTP/2, он построен поверх протокола QUIC и использует UDP вместо TCP. Это делает соединения быстрее, стабильнее и безопаснее.

HTTP/3 доступен в Baseline в статусе «Newly Available» с 2024-09-16.

Чем HTTP/3 лучше

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Быстрее устанавливается соединение. Больше нет отдельной стадии TLS: всё объединено.
Меньше задержек. Даже при потере пакета браузер не ждёт восстановления всего потока, как в TCP.
Устойчивость к переключениям сети. QUIC сохраняет соединение, даже если пользователь, например, переключился с Wi-Fi на LTE.
Безопасность по умолчанию. Все соединения — только через шифрование (TLS 1.3).

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

Как работает

HTTP/3 основан на QUIC — это транспортный протокол от Google, который работает через UDP. Он умеет передавать данные параллельно по разным потокам, не блокируя друг друга при сбоях. QUIC внедрён в современные браузеры и серверные платформы.

Нужно ли что-то делать?

Если вы разработчик сайта или веб-приложения, то скорее всего ничего специально делать не нужно — браузер сам выберет HTTP/3, если сервер его поддерживает. Ваш сайт будет работать быстрее просто потому, что инфраструктура на это перешла.

Если вы настраиваете сервер (например, NGINX или Cloudflare), тогда стоит включить поддержку HTTP/3. На популярных платформах это можно сделать одной строчкой.

Как проверить, используется ли HTTP/3

В Chrome или Edge:

Откройте DevTools → вкладка Network.
Перезагрузите страницу.
Добавьте колонку Protocol (правый клик по шапке таблицы).
Посмотрите, есть ли h3 у запросов — это и есть HTTP/3.

Через терминал (если у вас установлен curl):

curl -I --http3 https://example.com

Если сервер не поддерживает HTTP/3, будет ошибка или произойдёт откат на HTTP/2.

Через JavaScript

На уровне кода нельзя напрямую узнать версию протокола, но можно сделать fetch и посмотреть заголовки ответа через инструменты разработчика:

fetch('https://example.com')
  .then(response => console.log(response.headers))

А затем проверить в DevTools, какой протокол был использован.

Что важно помнить

HTTP/3 — это не «фича», которую вы вызываете в коде, а часть транспортного уровня.
Он поддерживается большинством современных браузеров: Chrome, Firefox, Edge, Safari.
Но он работает только с HTTPS, как и HTTP/2.

Заключение

HTTP/3 делает интернет быстрее, безопаснее и стабильнее — особенно на слабых сетях и мобильных устройствах. Вам не нужно менять HTML, JavaScript или CSS, чтобы получить преимущество. Главное — чтобы сервер и хостинг поддерживали эту технологию.

Если вы разрабатываете сайт с упором на производительность — убедитесь, что HTTP/3 включён. Это шаг вперёд к более отзывчивым и доступным интерфейсам.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

27 июля 2025

Как работает Map в JavaScript

Коллекция Map — это встроенный объект JavaScript, предназначенный для хранения пар ключ-значение. Она похожа на обычный объект ({}), но обладает важными преимуществами:

Любые типы ключей — строки, числа, объекты, функции.
Сохранение порядка вставки — перебор идёт в том порядке, в котором вы добавили элементы.
Удобные методы для работы — set(), get(), has(), delete(), clear() и итерации через for...of.

Эта структура особенно полезна, если вы хотите чётко контролировать порядок элементов и не ограничиваться только строковыми ключами, как в обычных объектах.

Пример: создаём коллекцию и работаем с ней

? Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

const userInfo = new Map();

userInfo.set('name', 'Алексей'); // строка
userInfo.set(42, 'Число');       // число
userInfo.set(true, 'Булево');    // логическое значение

console.log(userInfo.get(42)); // Выведет: 'Число'

Здесь мы добавили три элемента с разными типами ключей. Именно это отличает Map от обычного объекта — вы можете использовать, например, ключи-объекты или даже функции:

const objKey = { id: 1 };
const fnKey = () => {};

userInfo.set(objKey, 'объект');
userInfo.set(fnKey, 'функция');

console.log(userInfo.get(objKey)); // 'объект'

Перебор Map

Вы можете пройтись по элементам Map с помощью for...of:

for (const [key, value] of userInfo) {
  console.log(key, value);
}

Также доступны методы:

map.keys() — только ключи,
map.values() — только значения,
map.entries() — пары [ключ, значение].

console.log([...userInfo.keys()]); // Все ключи
console.log([...userInfo.values()]); // Все значения

Проверка наличия, удаление и очистка

userInfo.has('name'); // true
userInfo.delete(42);  // удаляет элемент с ключом 42
userInfo.clear();     // полностью очищает Map

Отличия от объектов

Особенность	Map	Object
Типы ключей	любые	только строки и символы
Порядок	сохраняется	не гарантирован
Итерация	проще и более гибкая	требует `Object.entries` и т. д.
Производительность	быстрее на больших объёмах	может быть медленнее

Когда использовать Map

Используйте Map, если:

Нужен предсказуемый порядок элементов.
Ключами должны быть не только строки.
Нужно часто добавлять, удалять или перебирать элементы.
Важно избежать конфликтов с ключами вроде __proto__ или hasOwnProperty.

Заключение

Map — мощная и удобная структура данных, особенно когда работа с обычными объектами становится громоздкой. Она расширяет привычные возможности, делает код чище и понятнее, а также даёт контроль над ключами и порядком. В современном JavaScript Map — это стандарт, на который стоит ориентироваться в сложных приложениях.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

27 июля 2025

10 приёмов работы с console, которые должен знать каждый разработчик

Консоль разработчика — важный инструмент отладки в JavaScript. С помощью методов console можно выводить информацию о работе скрипта, отслеживать ошибки, логировать данные и анализировать производительность. В браузере это доступно через панель разработчика (DevTools), обычно на вкладке «Console».

18 июля 2025

Полный гайд по объекту Date в JavaScript

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

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

25 июня 2025

FormControl и FormGroup в Angular

Если вы разрабатываете веб-приложение, вам рано или поздно придётся собирать данные от пользователя. К счастью, реактивные формы в Angular позволяют делать это без лишней сложности — без нагромождения директив и с минимальным количеством шаблонного кода. Более того, их просто валидировать, так что можно обойтись даже без end-to-end тестов.

Говоря проще, form control’ы в Angular дают полный контроль разработчику — ничего не происходит автоматически, и каждое решение по вводу и управлению принимается явно и осознанно. В этом руководстве мы покажем, как объединять form control’ы в form group’ы, чтобы структурировать форму и упростить доступ к её элементам — как к логическим блокам. Чтобы лучше понять, как работают form group’ы в Angular, мы шаг за шагом соберём реактивную форму.

Для работы с примером скачайте стартовый проект с GitHub и откройте его в VS Code. Если ещё не обновляли Angular, поставьте актуальную на момент написания версию — Angular v18.

1 июня 2025

AOT против JIT-компилятора: что лучше для разработки на Angular?

Angular — один из самых популярных фреймворков для фронтенда — предлагает два подхода к компиляции: предварительная компиляция и динамическая компиляция во время выполнения. Оба метода играют важную роль в оптимизации приложений на Angular и повышении их производительности. В этом материале мы рассмотрим различия между ними, их преимущества и разберёмся, когда стоит использовать каждый из подходов.

25 мая 2025

Динамические формы в Angular 19: пошаговое руководство

Формы — неотъемлемая часть большинства веб-приложений: будь то регистрация, ввод данных или опросы. Модуль реактивных форм в Angular отлично подходит для создания статичных форм, но во многих случаях требуется, чтобы форма могла динамически адаптироваться в зависимости от действий пользователя или внешних данных.

В этой статье мы рассмотрим, как создавать динамические формы с использованием автономных компонентов в Angular 19, применяя модульный подход, который избавляет от необходимости использовать традиционные модули Angular. В сопроводительном репозитории на GitHub для оформления форм используется Tailwind CSS, однако в статье внимание сосредоточено исключительно на логике динамических форм. Tailwind и связанные с ним настройки намеренно не включены в примеры, чтобы сохранить акцент на основной теме.

25 мая 2025

Как обнаружить изменения в Angular: пошаговая инструкция

Как разработчики на Angular, мы нередко задумываемся, как фреймворк отслеживает изменения в данных и затем отображает их во вьюхе. Этот процесс называется стратегией обнаружения изменений в Angular. В этом материале мы разберёмся, как это работает, и научимся выбирать подходящую стратегию для разных сценариев.

24 мая 2025

Интерфейсы и типы TypeScript: в чём разница

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

Взаимозаменяемость

Слияние интерфейсов

Типы пересечения

Типы объединения

Интерфейсы и классы

Кортежи

Резюме

Читать дальше

Как это работает

Можно ли сохранять логин и пароль вручную?

Безопасность

Поддержка и ограничения

Чем HTTP/3 лучше

Как работает

Нужно ли что-то делать?

Как проверить, используется ли HTTP/3

В Chrome или Edge:

Через терминал (если у вас установлен curl):

Через JavaScript

Что важно помнить

Заключение

Пример: создаём коллекцию и работаем с ней

Перебор Map

Проверка наличия, удаление и очистка

Отличия от объектов

Когда использовать Map

Заключение

Вход

Регистрация

Восстановление доступа

Запишитесь на консультацию