От автора: внешнее объявление переменных является способом указать компилятору TypeScript, что актуальный исходный код существует в другом месте. Если вы используете много сторонних js-библиотек, например, jquery/angularjs/nodejs, то не можете переписать его в TypeScript. Обеспечение безопасности типов и автодополнение ввода во время использования этих библиотек может стать проблемой для программиста TypeScript. Внешние объявление помогают эффективно интегрировать другие js-библиотеки в TypeScript.
Внешние определения
Как правило, внешние объявления хранятся в файле объявления типов со следующим расширением (d.ts)
|
1 |
Sample.d.ts |
Вышеприведённый файл не будет транскомпилирован в JavaScript. Он будет использован для безопасности типов и автодополнения ввода.
Синтаксис для внешнего объявления переменных или модулей выглядит следующим образом:
Синтаксис
|
1 2 |
declare module Module_Name { } |
Ссылаться на внешние файлы нужно в клиентском файле TypeScript, как это показано ниже:
|
1 |
/// <reference path = " Sample.d.ts" /> |
Пример
Давайте рассмотрим это на примере. Предположим, что вам дали стороннюю библиотеку javascript, которая содержит код, похожий на этот.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
FileName: CalcThirdPartyJsLib.js var TutorialPoint; (function (TutorialPoint) { var Calc = (function () { function Calc() { } Calc.prototype.doSum = function (limit) { var sum = 0; for (var i = 0; i <= limit; i++) { Calc.prototype.doSum = function (limit) { var sum = 0; for (var i = 0; i <= limit; i++) { sum = sum + i; return sum; return Calc; TutorialPoint.Calc = Calc; })(TutorialPoint || (TutorialPoint = {})); var test = new TutorialPoint.Calc(); } } } } } |
Как у программиста typescript, у вас не будет времени переписывать эту библиотеку в typescript. Но всё же, вам придётся использовать метод doSum() с безопасностью типов. Вам поможет файл внешнего объявления. Давайте создадим файл внешнего объявления Calc.d.ts
|
1 2 3 4 5 6 |
FileName: Calc.d.ts declare module TutorialPoint { export class Calc { doSum(limit:number) : number; } } |
Внешние файлы не содержат реализаций, это просто объявления типов. Теперь нужно включить объявления в файл typescript, как в этом примере:
|
1 2 3 4 5 |
FileName : CalcTest.ts /// <reference path = "Calc.d.ts" /> var obj = new TutorialPoint.Calc(); obj.doSum("Hello"); // ошибка компиляции console.log(obj.doSum(10)); |
Такая строка кода выдаст ошибку компиляции. Это связано с тем, что мы указали, что параметр ввода будет числом.
|
1 |
obj.doSum("Hello"); |
Закомментируйте вышеуказанную строку и скомпилируйте программу используя следующий синтаксис:
|
1 |
tsc CalcTest.ts |
После компиляции мы получим следующий JavaScript код(CalcTest.js).
|
1 2 3 4 5 6 |
//Сгенерировано посредством typescript 1.8.10 /// <reference path = "Calc.d.ts" /> var obj = new TutorialPoint.Calc(); // obj.doSum("Hello"); console.log(obj.doSum(10)); |
Для того, чтобы выполнить код, давайте добавим html-страницу с тэгами script, как показано в примере ниже. Добавьте скомпилированный файл CalcTest.js и файл сторонней библиотеки CalcThirdPartyJsLib.js.
|
1 2 3 4 5 6 7 8 9 |
<html> <body style = "font-size:30px;"> <h1>Ambient Test</h1> <h2>Calc Test</h2> </body> <script src = "CalcThirdPartyJsLib.js"></script> <script src = "CalcTest.js"></script> </html> |
Мы получим следующую страницу:
В консоли мы увидим такой результат: 55
Похожим образом, вы можете интегрировать jquery.d.ts или angular.d.ts в проект, исходя из ваших требований.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.
