TypeScript - otoczenie

Deklaracje otoczenia są sposobem na poinformowanie kompilatora TypeScript, że rzeczywisty kod źródłowy istnieje w innym miejscu. Kiedy konsumujesz grupę osób trzecichjsbibliotek, takich jak jquery / angularjs / nodejs, nie można ich przepisać w TypeScript. Zapewnienie bezpieczeństwa typów i inteligencji podczas korzystania z tych bibliotek będzie wyzwaniem dla programisty TypeScript. Deklaracje otoczenia pomagają bezproblemowo integrować innejs biblioteki do TypeScript.

Definiowanie otoczenia

Deklaracje otoczenia są zgodnie z konwencją przechowywane w pliku deklaracji typu z następującym rozszerzeniem (d.ts)

Sample.d.ts

Powyższy plik nie zostanie transkompilowany do JavaScript. Będzie używany do zapewnienia bezpieczeństwa typów i inteligencji.

Składnia deklarowania zmiennych otoczenia lub modułów będzie następująca:

Składnia

declare module Module_Name {
}

Pliki otoczenia powinny być przywoływane w pliku TypeScript klienta, jak pokazano -

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

Przykład

Zrozummy to na przykładzie. Załóżmy, że otrzymałeś bibliotekę javascript innej firmy, która zawiera kod podobny do tego.

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

Jako programista maszynopisów nie będziesz miał czasu na przepisanie tej biblioteki do maszynopisu. Ale nadal musisz użyć metody doSum () z bezpieczeństwem typów. To, co możesz zrobić, to plik deklaracji otoczenia. Utwórzmy plik deklaracji otoczenia Calc.d.ts

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

Pliki otoczenia nie będą zawierały implementacji, są to tylko deklaracje typów. Deklaracje należy teraz dołączyć do pliku maszynopisu w następujący sposób.

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

Poniższy wiersz kodu pokaże błąd kompilatora. Dzieje się tak, ponieważ w pliku deklaracji określiliśmy, że parametrem wejściowym będzie liczba.

obj.doSum("Hello");

Skomentuj powyższą linię i skompiluj program, używając następującej składni -

tsc CalcTest.ts

Podczas kompilacji wygeneruje następujący kod 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));

Aby wykonać kod, dodajmy stronę html ze znacznikami script, jak podano poniżej. Dodaj skompilowany plik CalcTest.js i plik biblioteki innej firmy 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>

Wyświetli następującą stronę -

Na konsoli możesz zobaczyć następujące dane wyjściowe -

Podobnie możesz zintegrować jquery.d.ts lub angular.d.ts z projektem, w zależności od wymagań.