TypeScriptでJavaScriptライブラリを使う

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

型定義ファイルを使う

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

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

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

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

TypeScript2.0からはTypingsやtsdすらいらない

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

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

JQueryの場合(他のでもだいたい同じ)

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

あった。@types/jquery

型ファイルインストール

なんとこれで完了。

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

これで使えます。

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

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

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

おわり

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

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

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

ではまた。

にほんブログ村 IT技術ブログへ
おすすめ

Udemyのビデオ講座は本当に捗るので学習にとてもおすすめです。まじで。


スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です