Модульні уроки (2/2)
Оголошення та злиття
Файли декларації типу (з розширенням .d.ts) використовуються в TypeScript для опису форми існуючого коду JavaScript без реалізації будь-якої фактичної логіки. Вони містять лише визначення типів, інтерфейси та сигнатури функцій.
Ці файли необхідні при використанні сторонніх бібліотек, написаних чистим JavaScript.
Злиття декларацій
Об’єднання декларацій — це поведінка, за якої компілятор об’єднує дві або більше окремих декларацій, оголошених з однаковою назвою, в одне визначення.
Найпоширенішим випадком є злиття інтерфейсу:
interface User {
name: string;
}
interface User {
age: number;
}
// The resulting User interface has both name and age properties!
const student: User = {
name: 'Alice',
age: 23,
};Якщо властивості мають однакові назви, вони мають бути одного типу, інакше TypeScript повідомить про помилку.
Зміна глобальних і зовнішніх модулів
Ми можемо використовувати злиття декларацій для розширення інтерфейсів, визначених в інших модулях або в глобальній області видимості.
Наприклад, якщо ми хочемо додати властивість до глобального об’єкта браузера window:
declare global {
interface Window {
analyticsToken: string;
}
}Використовуючи declare global, ми повідомляємо TypeScript, що вставляємо новий підпис в існуючий глобальний інтерфейс Window.
Спробуйте самі
Вправа 1: Об’єднання базових декларацій
У TypeScript інтерфейси з однаковою назвою в одній області автоматично об’єднуються. Оголошіть користувача інтерфейсу з назвою властивості: рядок, а потім у другому блоці оголосите той самий користувач інтерфейсу, додавши властивість age: number. Нарешті, оголосите постійного користувача типу User із відповідними значеннями.
Показати підказку
Двічі оголосите інтерфейс користувача, вставивши відповідні властивості, а потім призначте поля об’єкту користувача.
Рішення доступне після 3 спроб
Вправа 2: Розширення інтерфейсу глобального вікна
Уявіть, що ви хочете розширити глобальний інтерфейс Window, щоб додати спеціальну властивість під назвою config типу Record<string, string>. Напишіть правильну декларацію за допомогою declare global, щоб об’єднати нову властивість із глобальним інтерфейсом Window.
Показати підказку
Використовуйте declare global {interface Window { config: Record<string, string>; } }.
Рішення доступне після 3 спроб