TypeScript 环境声明

环境声明是告诉TypeScript编译器实际源代码存在于其他地方的一种方式。当您使用大量第三方JS库（如jquery / angularjs / nodejs）时，您无法将其重写为TypeScript。在使用这些库时确保类型安全性和智能感应对于TypeScript程序员来说是一项挑战。环境声明有助于将其他JS库无缝集成到TypeScript中。

定义环境

按照惯例，环境声明保存在具有以下扩展名（d.ts）的类型声明文件中。

Sample.d.ts

上述文件不会被转译为JavaScript。它将用于类型安全和智能感知。

声明全局变量或模块的语法如下所示 −

语法

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

作为一个TypeScript程序员，你可能没有时间将这个库重写为TypeScript。但你仍然需要使用doSum()方法来进行类型安全的操作。你可以使用环境声明文件来实现这一点。让我们创建一个环境声明文件Calc.d.ts。

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

环境文件不包含实现，仅包含类型声明。现在，声明需要在typescript文件中包含如下。

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

下面的代码行将会显示一个编译错误。这是因为在声明文件中我们指定了输入参数将是一个数字（number）。

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>