📌  相关文章
📜  TypeScript-环境

📅  最后修改于: 2020-10-19 03:57:39             🧑  作者: Mango

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

定义环境

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

Sample.d.ts

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

声明环境变量或模块的语法如下：

句法

declare module Module_Name {
}

应当在客户端TypeScript文件中引用环境文件，如下所示-

///

例

让我们借助示例来理解这一点。假设您获得了一个第三方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  
///  
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
/// 
var obj = new TutorialPoint.Calc();

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

为了执行代码，让我们添加一个带有脚本标签的html页面，如下所示。添加已编译的CalcTest.js文件和第三方库文件CalcThirdPartyJsLib.js。

Ambient Test
 
      
Calc Test

它将显示以下页面-

环境声明

在控制台上，您可以看到以下输出-

55

同样，您可以根据需要将jquery.d.ts或angular.d.ts集成到项目中。