Interface vs Type Alias

Тренажер по TypeScript для пользователей с начальным уровнем подготовки.

Тренажер по TypeScript

В TypeScript существует два основных способа описания формы объекта: interface и type. Хотя во многих случаях они взаимозаменяемы, между ними есть ключевые различия.

Type Alias (псевдоним типа) более универсален. Он может описывать примитивы, объединения (Union types), пересечения и кортежи.
type ID = string | number;

Interface предназначен исключительно для описания структуры объектов и классов. Главная особенность интерфейсов — возможность декларативного слияния (declaration merging): если объявить одноименный интерфейс дважды, TypeScript объединит их поля. Типы так делать не умеют и выдадут ошибку.

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

Список тем

1. Сравнение возможностей

id: 40684_interface_vs_type_compare_features

В левой колонке перечислены возможности и характеристики, связанные с объявлением типов в TypeScript. В правой колонке указаны две сущности: Interface и Type Alias. Сопоставьте каждую возможность с той сущностью, для которой она характерна или допустима. Обратите внимание, что в правой колонке варианты повторяются, поэтому в проверке учитываются все корректные варианты сопоставления по смыслу.

Сопоставьте строки в правой(нижней) части с соответствующими строками в левой(верхней) по порядковому номеру
Поддерживает объединение объявлений (declaration merging)
Может описывать примитивные типы (string, number, boolean)
Может быть расширен с помощью ключевого слова extends
Может создавать пересечения типов с помощью &
Может создавать объединения типов с помощью |
Чаще используется для описания формы объектов и классов
Interface
Type Alias
Type Alias
Type Alias
Interface
Interface
Сообщения
Проверить
Показать подсказку

2. Синтаксис расширения

id: 40684_interface_syntax_replace

Дополните фрагмент кода на TypeScript, чтобы определить интерфейс Person с полем name типа string, а затем определить интерфейс Employee, который расширяет Person и добавляет поле employeeId типа number. Вставьте пропущенные ключевые слова в указанные места, чтобы код соответствовал синтаксису расширения интерфейсов.

Заполните пропуски
input1S Person {
  name: string;
}

interface Employee input2S Person {
  employeeId: number;
}
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

3. Объединение типов

id: 40684_type_union_select_fill

В этом задании вам предстоит создать объединение типов (Union Type) для представления статусов заказа в TypeScript. В коде с пропусками необходимо выбрать подходящие элементы из выпадающих списков, чтобы получить корректное объявление типа и присвоение значения переменной. Обратите внимание, что для объединения строковых литералов используется специальный синтаксис, отличный от интерфейсов.

Нужно правильно расставить в пропуски предложенные варианты
input1S OrderStatus = "pending" input2S "completed" input3S "cancelled";
const status: OrderStatus = input4S;
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

4. Ошибка дублирования типа

id: 40684_interface_merge_error

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

Найдите ошибку и исправьте
// Объявление типа для пользователя
type User = {
  id: number;
  name: string;
};
 
// Попытка добавить свойство email
type User = {
  email: string;
};
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

5. Конструирование пересечения

id: 40684_build_intersection_type

Из предложенных строк соберите корректную TypeScript-программу, которая определяет два типа (Person и Employee), создаёт новый тип EmployeePerson как их пересечение с помощью оператора '&', объявляет объект этого типа и выводит в консоль значение свойства name. Игнорируйте лишние строки, которые не требуются для решения.

Перетяните в правильном порядке строки из одного блока в другой
type Person = { name: string; age: number; };
type Employee = { company: string; salary: number; };
type EmployeePerson = Person & Employee;
const emp: EmployeePerson = { name: 'Alice', age: 30, company: 'Tech', salary: 50000 };
console.log(emp.name);
type Student = { grade: number; };
console.log(emp.salary);
Сообщения
Проверить
Показать решение на 3 сек.
Показать подсказку

6. Распределение определений

id: 40684_sort_definitions

Перед вами список определений типов на TypeScript. Разнесите их по двум категориям: 'Только Type Alias' и 'Interface или Type Alias'. Обратите внимание, что некоторые конструкции могут быть выражены только через ключевое слово `type`, в то время как другие могут быть созданы как с помощью `type`, так и с помощью `interface`. Каждый элемент должен оказаться в одной из категорий.

Перетяните элементы в соответствующие блоки
Только Type Alias
Interface или Type Alias
type MyString = string;
type Person = { name: string; age: number; };
type ID = string | number;
type Point = [number, number];
type Greet = (name: string) => string;
type Numbers = number[];
type Flag = boolean;
type Coordinate = { x: number; y: number; };
Сообщения
Проверить
Показать подсказку

7. Анализ цепочки наследования

id: 40684_analyze_extension_logic

Проанализируйте TypeScript-код сверху и восстановите последовательность шагов, которые выполняются при проверке соответствия объекта интерфейсу B, который расширяет интерфейс A. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить логику проверки обязательных свойств объекта.

interface A {
  x: number;
}

interface B extends A {
  y: string;
}

const candidate = {
  x: 10,
  y: "hello"
};

const bObj: B = candidate;
console.log(bObj.x, bObj.y);
Расположите элементы в логичном порядке
Присваивание candidate переменной bObj типа B (успешно, так как объект удовлетворяет интерфейсу B).
Проверка свойства x объекта candidate: наличие и тип number.
Определение интерфейса B, который расширяет A и требует дополнительно свойство y типа string.
Вывод в консоль: 10 и "hello".
Проверка свойства y объекта candidate: наличие и тип string.
Определение интерфейса A: требуется свойство x типа number.
Создание объекта candidate со свойствами x и y, соответствующих типам.
Сообщения
Проверить
Показать подсказку

TypeScript: компиляция и запуск

id: 40684_compiler

В этом упражнении мы разберем вечный спор: Interface против Type Alias. Хотя они часто взаимозаменяемы, у них есть ключевые отличия, такие как слияние деклараций и работа с объединениями (Unions). Попробуйте раскомментировать код с повторным объявлением Type, чтобы увидеть ошибку компиляции, или создайте свой собственный Union-тип, который интерфейсы реализовать не могут. Экспериментируйте с расширением структур через `extends` и `&`, чтобы почувствовать разницу в синтаксисе и возможностях!

TS
Запустить тренажёр (TypeScript)
НайтиКурс.Ру