TypeScriptでJavaScriptライブラリを使う

TypeScriptからJQueryなどのJavaScriptのライブラリを使いたい時にどうすればいいかわからなかったのでメモ。

型定義ファイルをざっくり説明するとそのJavaScriptライブラリにどういう変数とメソッドがあるのかだけが書いてあるTypeScriptのファイルです。処理自体は書いてありません。私的にはc#やJavaのインターフェイスに近いイメージです（イメージだけ）。

TypeScriptは厳しいので宣言されていない変数、jQueryなら$とかを使おうとするとコンパイルエラーになってしまうので、この$はjsになったら読み込まれますよと型定義ファイルに書いて、それを読み込んで教えてあげとくことでコンパイルすることを許してもらうわけですね。

型定義ファイルは大抵ネットにあります。

なければ自分で書くらしいですよ。

2.0よりまえのバージョンのTypeScriptではTypingsやtsdという型定義ファイル管理用のパッケージをnpmでインストールすることで型定義ファイルを管理しJavaScriptのライブラリを使用していたらしいのですが、2.0以降ならそう言ったものなしに簡単に使えます。

2.0よりまえの人はできるならアップデートしよう

JQueryの場合（他のでもだいたい同じ）

TypeSearchで型定義ファイルの存在を確認

型ファイルインストール

//プロジェクトに移動
cd myProject
//入れる
//本番用なので-Dじゃくて-S(--save-devじゃなくて--save)
npm install @types/jquery -S

なんとこれで完了。

myProject/node_module/@types/jqueryに色々入ります。

//test.ts
//使ってみる
$(function () {
    alert("hogge");
});
//htmlで忘れずにjQueryとtest.tsをコンパイルしたtest.jsを読み込むこと。
//jQueryを先に読み込まないと動かないはず

これで使えます。

忘れずhtmlでjQueryとtest.jsを読み込んでください。

jQueryを先に読み込まないと多分エラーで動かないと思います。

それにしても思った以上に簡単でした。よかったよかった。

ということで最新のTypeScriptならJSのライブラリも簡単に使えて超素敵ってはなしでした。

同じくJavaScriptのライブラリを使おうとしたら

‘Vivus’ refers to a UMD global, but the current file is a module. Consider adding an import instead.

というエラーが出たものの色々調べて解決できた話を次回書きます。

ではまた。