Ключевое слово declare в TypeScript используется для создания ambient declarations (окружающих объявлений). Это способ сказать компилятору: «Эта переменная, функция или класс уже существует где-то в глобальной области видимости (например, подключена через <script>), не пытайся её компилировать, просто знай о её типах».
Обычно declare используется при написании файлов деклараций (.d.ts) или для типизации глобальных библиотек, у которых нет встроенных типов. Код с declare не генерирует JavaScript-код при компиляции — он полностью стирается.
- Пример:
declare const MY_GLOBAL_CONFIG: any;
В этом уроке мы разберем синтаксис declare var/let/function, научимся описывать глобальные переменные и избегать ошибок, связанных с реализацией методов внутри деклараций.
- Модуль 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
- Что такое .d.ts файлы.
- Declare keyword.
- @types пакеты.
- Модуль 27: Типизация асинхронного кода
- Модуль 28: Практические паттерны
1. Объявление глобальной переменной
В этом задании вам нужно дополнить объявление глобальной переменной, чтобы TypeScript перестал выдавать ошибку о неизвестном идентификаторе. Глобальная переменная API_URL должна быть доступна во всем коде и иметь строковый тип. Вставьте пропущенные ключевое слово и тип, чтобы объявление стало корректным.
// Объявите глобальную переменную API_URL
// Она не изменяется и имеет строковый тип
input1S const API_URL: input2S;
// Теперь TypeScript знает о API_URL2. Структура декларации
Разметьте части декларации функции в TypeScript, используя ключевое слово `declare`. Укажите для каждого выделенного фрагмента, является ли он ключевым словом `declare`, именем функции, типом аргумента или возвращаемым типом. Это упражнение поможет закрепить понимание структуры деклараций в файлах деклараций (.d.ts).
{{declare~|~t1}} {{function~|~t2}} {{init~|~t3}}({{config~|~t4}}{{:~|~t5}} {{object~|~t6}}){{:~|~t7}} {{void~|~t8}};3. Запрет реализации
В данном фрагменте TypeScript-кода допущена ошибка, связанная с использованием ключевого слова `declare` для объявления функции. Функция объявлена с телом реализации, что противоречит предназначению `declare` для описания внешних сущностей без предоставления реализации. Исправьте строку с объявлением функции, чтобы она соответствовала синтаксису объявлений с `declare`, удалив тело и правильно завершив объявление.
declare function isReady(): boolean { return true; }const result = isReady();console.log(result); // Этот код должен быть исправлен4. Типы объявлений
В этом задании вам предстоит заполнить пропуски в коде TypeScript, используя ключевые слова, которые могут следовать после `declare` для объявления различных глобальных сущностей. Вам нужно выбрать подходящие ключевые слова из предложенного списка, чтобы код стал корректным с точки зрения TypeScript. Обратите внимание на контекст: `declare` используется для описания существующих сущностей, которые уже определены в другом месте (например, в сторонних библиотеках).
// Объявление глобальной переменной
input1S myGlobal: string;
// Объявление глобальной функции
input2S greet(name: string): void;
// Объявление глобального класса
input3S MyClass {
constructor() {}
method(): void {}
}
// Объявление пространства имён
input4S MyNamespace {
export const version = '1.0';
}5. Жизненный цикл кода
Проанализируйте TypeScript-код сверху и восстановите последовательность шагов жизненного цикла кода, использующего `declare var`. Шаги снизу перемешаны — расставьте их в правильном порядке, чтобы отразить, как объявление `declare var` обрабатывается на этапах разработки, компиляции и выполнения в браузере.
// В браузере уже выполнено: window.myGlobalVar = "Hello from window";
declare var myGlobalVar: string;
console.log(myGlobalVar);6. Global Namespace
Из предложенных строк соберите корректную декларацию глобального пространства имён `MyLib` с функцией `greet`, которая принимает строковый параметр и ничего не возвращает. Игнорируйте лишние строки, которые не относятся к объявлению этого пространства имён. Правильная последовательность должна начинаться с объявления пространства имён, затем содержать объявление функции внутри него и завершаться закрывающей фигурной скобкой.
declare namespace MyLib { function greet(name: string): void;}const x: number = 5;declare module 'MyModule' { }function sayGoodbye(): void;7. Ambient vs Implementation
Перед вами список фрагментов кода TypeScript, связанных с объявлением типов и реализацией. Разнесите их по двум категориям в соответствии с их поведением при компиляции в JavaScript. Обратите внимание, что некоторые конструкции существуют только на этапе проверки типов и удаляются из итогового кода, а другие остаются как исполняемый JavaScript. Каждый элемент должен оказаться в одной из категорий.
declare const version: string;interface User { name: string; }const count = 5;function calculate(a: number, b: number): number { return a + b; }declare function log(message: string): void;type Coordinates = { x: number; y: number; };class Calculator { add(a: number, b: number) { return a + b; } }declare module "my-module" { export const value: number; }