アンビエント宣言(declare)と型定義ファイル(d.ts)

JavaScriptのライブラリをTypeScriptで利用できるようにする方法について確認します。アンビエント宣言、型定義ファイル( .d.ts )などの知識が必要です。

アンビエント宣言( declare )

下記ソースは、javascriptであれば動作しますが、typescriptの場合、変数の宣言がされてないためコンパイルエラーとなります。

x = 30;          // error TS2304: Cannot find name 'x'.
console.log(x);  // error TS2304: Cannot find name 'x'.

declareキーワード を使いアンビエント宣言をしておくことで、TypeScriptでも動作します。

declare var x: number;

x = 30;
console.log(x);

JavaScriptをTypeScriptで利用

JavaScriptのライブラリをTypeScriptで利用する場合、アンビエント宣言によって、型情報を後付で与える必要があります。アンビエント宣言は専用の別ファイル( .d.ts )で管理します。

主要なJavaScriptライブラリの型定義ファイルは、DefinitelyTyped で管理されています。

typscript2.0以降 であれば、npmコマンドだけで型定義ファイルを取り込むことができます。
(以前は typings を利用してました。)

npm install --save-dev @types/jquery

型定義ファイルは、node_modules/@types 配下に追加されます。

tsconfig.jsontypeRootsオプション で型定義ファイルが存在するディレクトリの位置を調整できます。デフォルトで @types になっています。

{
  "compilerOptions": {
    "typeRoots": []
  }
}

参考・補足