TypeScript-アンビエント

アンビエント宣言は、実際のソースコードが他の場所に存在することをTypeScriptコンパイラに伝える方法です。 jquery/angularjs/nodejsのような多数のサードパーティ js ライブラリを使用している場合、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をプロジェクトに統合できます。

Typescript-ambients

目次

TypeScript-アンビエント

アンビエントの定義

構文

例