【零基础入门TypeScript】环境

server/2024/9/23 3:21:40/

定义环境

句法

例子

环境声明是告诉 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();}}}}
}

作为打字稿程序员，您将没有时间将此库重写为打字稿。但您仍然需要使用类型安全的 doSum() 方法。您可以做的是环境声明文件。让我们创建一个环境声明文件 Calc.d.ts

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

环境文件将不包含实现，它只是类型声明。现在需要将声明包含在打字稿文件中，如下所示。

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>

它将显示以下页面 -

环境声明