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

2022/11/15

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);

アンビエント宣言の部分は、型定義ファイル(.d.ts) と呼ばれる別ファイルで管理することが推奨されています。

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

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

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

# jqueryの型定義ファイルを取り込む
npm install --save-dev @types/jquery

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

typesyncコマンドを活用すると型定義ファイルの追加作業が楽になります。

最近では、型定義ファイルが用意されていることがほとんどですが、もし存在しない場合、自身で型定義ファイルを用意する必要があります。

src/@types などのフォルダを作成して、外部モジュールのアンビエント宣言を記述した型定義ファイル(.d.ts)を用意します。

よかったらシェアしてね！