TypeScript-アンビエント

アンビエント宣言は、実際のソースコードが他の場所に存在することをTypeScriptコンパイラに伝える方法です。あなたがたくさんの第三者を消費しているときjsjquery / 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; 
   }
}

アンビエントファイルには実装は含まれず、単なる型宣言です。次のように、宣言を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をプロジェクトに統合できます。