免費(fèi)AI編程助手
TypeScript 環(huán)境聲明
環(huán)境聲明是一種告訴TypeScript編譯器實(shí)際源代碼存在于其他位置的方法。當(dāng)你使用像jquery/angularjs/nodejs這樣的第三方js庫(kù)時(shí)，你無(wú)法在TypeScript中重寫(xiě)它。使用這些庫(kù)時(shí)確保類(lèi)型安全和智能感知對(duì)于TypeScript程序員來(lái)說(shuō)將是一項(xiàng)挑戰(zhàn)。環(huán)境聲明幫助其他js庫(kù)無(wú)縫集成到TypeScript中。
定義環(huán)境
按慣例，環(huán)境聲明保存在類(lèi)型聲明文件中，擴(kuò)展名如下（d.ts）
Sample.d.ts
上述文件將不會(huì)被轉(zhuǎn)換為JavaScript。它將用于類(lèi)型安全和智能感知。
聲明環(huán)境變量或模塊的語(yǔ)法如下：
語(yǔ)法
declare module Module_Name {
}
應(yīng)在客戶端TypeScript文件中引用環(huán)境文件，如下所示：
/// <reference path = " Sample.d.ts" />
示例
讓我們通過(guò)一個(gè)例子來(lái)理解這一點(diǎn)。假設(shè)您獲得了第三方j(luò)avascript庫(kù)，其中包含類(lèi)似于以下的代碼。
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();
}
}
}
}
}
作為T(mén)ypeScript程序員，你沒(méi)有時(shí)間將此庫(kù)重寫(xiě)為T(mén)ypeScript。但你仍然需要使用類(lèi)型安全的doSum()方法。你可以做的是環(huán)境聲明文件。讓我們創(chuàng)建一個(gè)環(huán)境聲明的文件Calc.d.ts：
FileName: Calc.d.ts
declare module TutorialPoint {
export class Calc {
doSum(limit:number) : number;
}
}
環(huán)境文件將不包含實(shí)現(xiàn)，它只是類(lèi)型聲明。聲明現(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));
以下代碼行將顯示編譯器錯(cuò)誤。這是因?yàn)?，在聲明文件中，我們指定的輸入?yún)?shù)將是數(shù)字。
obj.doSum("Hello");
注釋上面的行并使用以下語(yǔ)法編譯程序：
tsc CalcTest.ts
在編譯時(shí)，它會(huì)生成以下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í)行代碼，讓我們添加一個(gè)帶有腳本標(biāo)記的html頁(yè)面，如下所示。添加已編譯的CalcTest.js文件和第三方庫(kù)文件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>
它會(huì)顯示以下頁(yè)面：
在控制臺(tái)上，你可以看到下面的輸出：
55
同樣，您可以根據(jù)需要將jquery.d.ts或angular.d.ts集成到項(xiàng)目中。
更多建議：