Учебники

TypeScript — Ambient

Июль 29, 2018

Декларации окружения — это способ сообщить компилятору TypeScript, что фактический исходный код существует в другом месте. Когда вы используете кучу сторонних js- библиотек, таких как jquery / angularjs / nodejs, вы не можете переписать их в TypeScript. Обеспечение безопасности типов и интеллектуальности при использовании этих библиотек будет сложной задачей для программиста TypeScript. Декларации окружения помогают легко интегрировать другие библиотеки JS в TypeScript.

Определение окружающих

Декларации окружения по соглашению хранятся в файле декларации типа со следующим расширением (d.ts) 

Sample.d.ts

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

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

Синтаксис 

declare module Module_Name {
}

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

/// <reference path = " Sample.d.ts" />

пример

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

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();
            }
         }
      }
   }
}

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

FileName: Calc.d.ts 
declare module TutorialPoint { 
   export class Calc { 
      doSum(limit:number) : number; 
   }
}

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

FileName : CalcTest.ts  
/// <reference path = "Calc.d.ts" /> 
var obj = new TutorialPoint.Calc(); 
obj.doSum("Hello"); // compiler error 
console.log(obj.doSum(10));

Следующая строка кода покажет ошибку компилятора. Это потому, что в файле декларации мы указали, что входным параметром будет число. 

obj.doSum("Hello");

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

tsc CalcTest.ts

При компиляции он сгенерирует следующий код JavaScript (CalcTest.js). 

//Generated by typescript 1.8.10
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();

// obj.doSum("Hello");
console.log(obj.doSum(10));

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

<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 в проект, основываясь на ваших требованиях.

45
Share: