免費AI編程助手
TypeScript 環(huán)境聲明
環(huán)境聲明是一種告訴TypeScript編譯器實際源代碼存在于其他位置的方法。當你使用像jquery/angularjs/nodejs這樣的第三方js庫時，你無法在TypeScript中重寫它。使用這些庫時確保類型安全和智能感知對于TypeScript程序員來說將是一項挑戰(zhàn)。環(huán)境聲明幫助其他js庫無縫集成到TypeScript中。
定義環(huán)境
按慣例，環(huán)境聲明保存在類型聲明文件中，擴展名如下（d.ts）
Sample.d.ts
上述文件將不會被轉換為JavaScript。它將用于類型安全和智能感知。
聲明環(huán)境變量或模塊的語法如下：
語法
declare module Module_Name {
}
應在客戶端TypeScript文件中引用環(huán)境文件，如下所示：
/// <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()方法。你可以做的是環(huán)境聲明文件。讓我們創(chuàng)建一個環(huán)境聲明的文件Calc.d.ts：
FileName: Calc.d.ts
declare module TutorialPoint {
export class Calc {
doSum(limit:number) : number;
}
}
環(huán)境文件將不包含實現(xiàn)，它只是類型聲明。聲明現(xiàn)在需要包含在TypeScript文件中，如下所示：
FileName : CalcTest.ts
/// <reference path = "Calc.d.ts" />
var obj = new TutorialPoint.Calc();
obj.doSum("Hello"); // compiler error
console.log(obj.doSum(10));
以下代碼行將顯示編譯器錯誤。這是因為，在聲明文件中，我們指定的輸入?yún)?shù)將是數(shù)字。
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));
為了執(zhí)行代碼，讓我們添加一個帶有腳本標記的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
同樣，您可以根據(jù)需要將jquery.d.ts或angular.d.ts集成到項目中。
更多建議：