Declaration Merging (слияние объявлений) — это механизм TypeScript, позволяющий объединять несколько объявлений с одинаковым именем в единое определение.
Чаще всего применяется для интерфейсов: если объявить интерфейс с тем же именем повторно, TypeScript автоматически объединит все свойства в один тип.
- Позволяет расширять интерфейсы библиотек без изменения исходного кода
- Работает для интерфейсов, пространств имён и некоторых других конструкций
- Свойства с одинаковыми именами должны иметь совместимые типы
Этот тренажёр поможет на практике разобраться с примерами слияния объявлений и типичными ошибками при использовании этой возможности TypeScript.
- Модуль 1: Введение в TypeScript
- Модуль 2: Примитивные типы
- Модуль 3: Специальные типы
- Модуль 4: Массивы
- Модуль 5: Кортежи (Tuples)
- Модуль 6: Объекты
- Модуль 7: Функции
- Модуль 8: Union типы
- Модуль 9: Литеральные типы
- Модуль 10: Type Aliases
- Модуль 11: Интерфейсы
- Модуль 12: Type Guards и Narrowing
- Модуль 13: Enums
- Модуль 14: Классы
- Модуль 15: Generics — основы
- Модуль 16: Generics — ограничения
- Модуль 17: Utility Types — базовые
- Модуль 18: Utility Types — работа с Union
- Модуль 19: Utility Types — функции
- Модуль 20: Type Assertions
- Модуль 21: Keyof и Typeof операторы
- Модуль 22: Mapped Types
- Модуль 23: Conditional Types
- Модуль 24: Discriminated Unions
- Модуль 25: Модули и типы
- Модуль 26: Declaration Files
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Базовое слияние интерфейсов
В TypeScript интерфейсы могут быть объявлены несколько раз, и их объявления автоматически сливаются. В этом задании вам нужно дополнить два объявления одного интерфейса. Заполните пропуски так, чтобы получился корректный TypeScript-код, в котором интерфейс User имеет свойства name (строка), age (число) и email (строка). Обратите внимание, что оба объявления должны иметь одинаковое имя.
input1S User {
name: input2S;
age: number;
}
input3S input4S {
email: string;
}2. Собери код с объединением интерфейсов
Из предложенных строк соберите корректную TypeScript-программу, которая демонстрирует объединение интерфейсов (declaration merging). Программа должна объявить интерфейс Product дважды с разными свойствами, создать объект, соответствующий этому интерфейсу, и вывести все его свойства в одном console.log. Некоторые строки лишние и не должны входить в решение.
interface Product { name: string; price: number; }interface Product { category: string; }const product: Product = { name: 'Laptop', price: 1500, category: 'Electronics' };console.log(`Name: ${product.name}, Price: ${product.price}, Category: ${product.category}`);interface AnotherInterface { id: number; }console.log(product.manufacturer);3. Конфликт типов при слиянии
В этом фрагменте TypeScript-кода есть два объявления интерфейса с одинаковым именем. При слиянии этих объявлений возникает конфликт типов для одного из свойств. Найдите строку с конфликтующим типом и исправьте её, чтобы интерфейсы могли быть корректно объединены без ошибок компиляции.
interface Person { name: string; age: number;} interface Person { name: number; city: string;}4. Какие свойства будут в итоговом интерфейсе
Проанализируйте три объявления интерфейса Car в TypeScript. Учитывая механизм Declaration Merging (объединения объявлений), определите, какой набор свойств с указанием их типов и модификаторов будет доступен в итоговом интерфейсе Car. Выберите все верные варианты из предложенных ниже.
interface Car {
brand: string;
}
interface Car {
model: string;
year?: number;
}
interface Car {
readonly VIN: string;
year: number;
}5. Анализ кода с расширением интерфейса
Проанализируйте TypeScript-код сверху и восстановите последовательность логических шагов выполнения программы. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как TypeScript обрабатывает слияние объявлений интерфейсов, создание объекта и вызов методов.
interface Person {
name: string;
greet(): void;
}
interface Person {
age: number;
celebrate(): void;
}
const john: Person = {
name: "John",
age: 30,
greet() {
console.log(`Hello, I'm ${this.name}`);
},
celebrate() {
console.log(`Celebrating ${this.age} years!`);
}
};
john.greet();
john.celebrate();greet() у объекта john (обращение к первому объявлению интерфейса)Person с полем name и методом greetcelebrate() у объекта john (обращение ко второму объявлению интерфейса)Personjohn, который соответствует объединённому интерфейсу PersonPerson с полем age и методом celebrate6. Что можно объединять в TypeScript
Перед вами список конструкций языка TypeScript. Разнесите их по двум категориям в соответствии с тем, поддерживают ли они слияние объявлений (declaration merging). Слияние объявлений — это особенность TypeScript, позволяющая комбинировать несколько отдельных объявлений с одним и тем же именем в одно. Каждый элемент однозначно относится только к одной категории.
7. Отметь все свойства итогового интерфейса
Перед вами три объявления интерфейса с одинаковым именем `User`. В TypeScript при использовании declaration merging (объединении объявлений) они сливаются в один итоговый интерфейс. Ваша задача — внимательно изучить код и отметить кликом только те свойства, которые будут присутствовать в итоговом объединённом интерфейсе `User`. Не отмечайте свойства, которые приведут к ошибке из-за несовместимости типов, или свойства, объявленные в других, не связанных интерфейсах.
interface User {
{{id~|~t1}}: number;
{{name~|~t2}}: string;
}
// Второе объявление интерфейса User
interface User {
{{email~|~t3}}: string;
{{id~|~t4}}: string; // Ошибка: несовместимый тип
{{age~|~t5}}: number;
}
// Третье объявление интерфейса User
interface User {
{{phone~|~t6}}: string;
{{isActive~|~t7}}: boolean;
}
// Интерфейс Admin (не участвует в объединении)
interface Admin {
permissions: string[];
}
Отметьте свойства итогового интерфейса User:
- {{id~|~t8}} (number)
- {{name~|~t9}} (string)
- {{email~|~t10}} (string)
- {{age~|~t11}} (number)
- {{phone~|~t12}} (string)
- {{isActive~|~t13}} (boolean)
- {{permissions~|~t14}} (string[])
