TypeScript 环境声明
环境声明是一种告诉TypeScript编译器实际源代码存在于其他位置的方法。当你使用像jquery/angularjs/nodejs这样的第三方js库时,你无法在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集成到项目中。
更多建议: