TypeScript — Внешние объявления переменной

TypeScript — Внешние объявления переменной

От автора: внешнее объявление переменных является способом указать компилятору TypeScript, что актуальный исходный код существует в другом месте. Если вы используете много сторонних js-библиотек, например, jquery/angularjs/nodejs, то не можете переписать его в TypeScript. Обеспечение безопасности типов и автодополнение ввода во время использования этих библиотек может стать проблемой для программиста TypeScript. Внешние объявление помогают эффективно интегрировать другие js-библиотеки в TypeScript.

Внешние определения

Как правило, внешние объявления хранятся в файле объявления типов со следующим расширением (d.ts)

Вышеприведённый файл не будет транскомпилирован в JavaScript. Он будет использован для безопасности типов и автодополнения ввода.

Фреймворк VUE JS: быстрый старт

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Синтаксис для внешнего объявления переменных или модулей выглядит следующим образом:

Синтаксис

Ссылаться на внешние файлы нужно в клиентском файле TypeScript, как это показано ниже:

Пример

Давайте рассмотрим это на примере. Предположим, что вам дали стороннюю библиотеку javascript, которая содержит код, похожий на этот.

Как у программиста typescript, у вас не будет времени переписывать эту библиотеку в typescript. Но всё же, вам придётся использовать метод doSum() с безопасностью типов. Вам поможет файл внешнего объявления. Давайте создадим файл внешнего объявления Calc.d.ts

Внешние файлы не содержат реализаций, это просто объявления типов. Теперь нужно включить объявления в файл typescript, как в этом примере:

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Такая строка кода выдаст ошибку компиляции. Это связано с тем, что мы указали, что параметр ввода будет числом.

Закомментируйте вышеуказанную строку и скомпилируйте программу используя следующий синтаксис:

После компиляции мы получим следующий JavaScript код(CalcTest.js).

Для того, чтобы выполнить код, давайте добавим html-страницу с тэгами script, как показано в примере ниже. Добавьте скомпилированный файл CalcTest.js и файл сторонней библиотеки CalcThirdPartyJsLib.js.

Мы получим следующую страницу:

В консоли мы увидим такой результат: 55

Похожим образом, вы можете интегрировать jquery.d.ts или angular.d.ts в проект, исходя из ваших требований.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и узнайте, как создать веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

ES 6 (EcmaScript 6.0)

Посмотрите видео по EcmaScript 6.0

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий