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>

它將顯示以下頁面：

在控制檯中，您可以看到以下輸出：

同樣，您可以根據需要將 jquery.d.ts 或 angular.d.ts 整合到專案中。

列印頁面