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技術ブログへ
おすすめ一覧

おすすめのサーバ

ミニバード :初心者向け。安くて簡単でWordPressブログ5個まで作れます。250円。

ロリポップ :初心者向け。250円~使えてお安い。500円のがかなり強くておすすめ。老舗で安心。

Conoha:中級者向け。安くクラウドを使ってみたい人におすすめ。時間定額なのでクラウド破産の心配なし。

おすすめのドメイン会社

スタードメイン ミニバード とセットで管理が楽。ついでにポイントももらえてお得。

その他おすすめ

Udemy :ビデオ講座は本当に捗るのでマジでおすすめです。

スポンサーリンク

コメントをどうぞ

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