TypeScript - Ambientes

Las declaraciones ambientales son una forma de decirle al compilador de TypeScript que el código fuente real existe en otro lugar. Cuando consume un montón de tercerosjsbibliotecas como jquery / angularjs / nodejs no puede reescribirlo en TypeScript. Garantizar la seguridad de los tipos y la inteligencia al usar estas bibliotecas será un desafío para un programador de TypeScript. Las declaraciones ambientales ayudan a integrar sin problemas otrosjs bibliotecas en TypeScript.

Definición de ambientes

Las declaraciones ambientales se guardan por convención en un archivo de declaración de tipo con la siguiente extensión (d.ts)

Sample.d.ts

El archivo anterior no se transcompilará a JavaScript. Se utilizará para seguridad de tipos e intellisense.

La sintaxis para declarar variables ambientales o módulos será la siguiente:

Sintaxis

declare module Module_Name {
}

Se debe hacer referencia a los archivos ambientales en el archivo TypeScript del cliente como se muestra:

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

Ejemplo

Entendamos esto con la ayuda de un ejemplo. Suponga que le han proporcionado una biblioteca javascript de terceros que contiene un código similar 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 programador de mecanografiado, no tendrá tiempo para reescribir esta biblioteca a mecanografiado. Pero aún necesita usar el método doSum () con seguridad de tipos. Lo que podría hacer es un archivo de declaración ambiental. Creemos un archivo de declaración ambiental Calc.d.ts

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

Los archivos ambientales no contendrán las implementaciones, son solo declaraciones de tipo. Las declaraciones ahora deben incluirse en el archivo mecanografiado de la siguiente manera.

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

La siguiente línea de código mostrará un error del compilador. Esto se debe a que en el archivo de declaración especificamos que el parámetro de entrada será número.

obj.doSum("Hello");

Comente la línea anterior y compile el programa usando la siguiente sintaxis:

tsc CalcTest.ts

Al compilar, generará el siguiente 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 ejecutar el código, agreguemos una página html con etiquetas de script como se indica a continuación. Agregue el archivo CalcTest.js compilado y el archivo de biblioteca de terceros 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>

Mostrará la siguiente página:

En la consola, puede ver el siguiente resultado:

Del mismo modo, puede integrar jquery.d.ts o angular.d.ts en un proyecto, según sus requisitos.

↰ Previous page