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));
以下代码行将显示编译器错误。 这是因为在声明文件中我们指定输入参数将为数字。
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>
将会显示以下页面 −
在控制台可以看到如下输出 −
55
同样，您可以根据您的要求将 jquery.d.ts 或 angular.d.ts 集成到项目中。
