TypeScript - Ambientes

As declarações de ambiente são uma forma de informar ao compilador TypeScript que o código-fonte real existe em outro lugar. Quando você está consumindo um monte de terceirosjsbibliotecas como jquery / angularjs / nodejs você não pode reescrevê-lo no TypeScript. Garantir a segurança de tipo e a inteligência ao usar essas bibliotecas será um desafio para um programador de TypeScript. Declarações ambientais ajudam a integrar perfeitamente outrosjs bibliotecas em TypeScript.

Definindo Ambientes

As declarações ambientais são, por convenção, mantidas em um arquivo de declaração de tipo com a seguinte extensão (d.ts)

Sample.d.ts

O arquivo acima não será transcompilado para JavaScript. Ele será usado para segurança de tipo e intellisense.

A sintaxe para declarar variáveis de ambiente ou módulos será a seguinte -

Sintaxe

declare module Module_Name {
}

Os arquivos de ambiente devem ser referenciados no arquivo TypeScript do cliente conforme mostrado -

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

Exemplo

Vamos entender isso com a ajuda de um exemplo. Suponha que você tenha recebido uma biblioteca javascript de terceiros que contém código semelhante a este.

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

Como um programador datilografado, você não terá tempo para reescrever esta biblioteca para datilografar. Mas ainda assim você precisa usar o método doSum () com segurança de tipo. O que você pode fazer é um arquivo de declaração de ambiente. Vamos criar um arquivo de declaração de ambiente Calc.d.ts

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

Os arquivos ambientais não conterão as implementações, são apenas declarações de tipo. As declarações agora precisam ser incluídas no arquivo de texto digitado da seguinte maneira.

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

A linha de código a seguir mostrará um erro do compilador. Isso ocorre porque no arquivo de declaração especificamos que o parâmetro de entrada será o número.

obj.doSum("Hello");

Comente a linha acima e compile o programa usando a seguinte sintaxe -

tsc CalcTest.ts

Na compilação, ele irá gerar o seguinte código 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));

Para executar o código, vamos adicionar uma página html com tags de script conforme mostrado abaixo. Adicione o arquivo CalcTest.js compilado e o arquivo de biblioteca de terceiros 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>

Ele exibirá a seguinte página -

No console, você pode ver a seguinte saída -

Da mesma forma, você pode integrar jquery.d.ts ou angular.d.ts em um projeto, com base em seus requisitos.