※本ページではアフィリエイトリンク(PR)が含まれています※

TypeScript

【5分でわかる】アンビエント宣言 | TypeScript入門

この記事ではTypeScriptにおけるアンビエント宣言をご紹介します。

アンビエント宣言の使い方

TypeScriptにおけるアンビエント宣言の使い方をご紹介します!

アンビエント宣言とは?

JavaScriptのライブラリをTypeScriptのプロジェクトで利用したい場合、型の宣言がJavaScript上でないためエラーになります。

その際にアンビエント宣言を使用することで、JavaScript上の変数とアンビエント宣言で定義した型をマッチングさせることにより、エラーを解消することができます。

例えば以下のようなJavaScriptのコードがあったとします。

test = "テスト";

そこでアンビエント宣言を使用して以下のように書いてみます。

declare var test: string;
test = "テスト";

こちらであればエラーは発生しません。

型の定義ファイルを作ると便利

一つ一つのtsファイルに対しアンビエント宣言を書くのは手間がかかりますし、保守性もよくありません。

そこで一つの型定義専用のファイルを作成し、管理するのが一般的です。

定義ファイルは.d.tsと拡張子のファイルで管理されます。

定義ファイルの作り方

以下のコマンドを実行するだけで定義ファイルを生成することができます。

tsc -d <任意のファイル名>.ts

また、JavaScriptの主要なライブラリについては、すでに型定義済みのファイルをDefinitelyTypedで提供されています。

以下のコマンドで定義ファイルを取り込むことが可能です。

npm install --save-dev @types/jquery

まとめ

今回はTypeScriptにおけるアンビエント宣言を紹介しました。

ぜひこの機会に習得してみてください。

きむら

ここまで記事を読んでいただきありがとうございました♪