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:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree