tsファイルでjQueryを使う前の前提
今、自分が携わっているプロジェクトでは、Bootstrapを使用したテンプレートを採用しており、その中でjQueryを使っています。その中で、後からTypeScriptを使い始めました。
そこで、TypeScriptの中でもBootstrapで用意されている関数などを使いたいなぁ思い、どのようにすれば使えるのかをまとめました。
まず、前提として、私のテンプレートでは、Bootstrapで用意されたjsが置いてあり、その中にjQuery.jsやjQueryのプラグインjsが定義してあります。
Bootstrapで用意されている全jsをimportするのはムリゲー過ぎる
まず調べたところ、TypeScriptのファイル内で、jQueryを使いたい場合に良く書かれているのが以下のような記述でした。
import $ from 'jquery.jsまでのパス';
しかし、この書き方だと、ただのjQueryの機能は使えますが、bootstrap.jsなど、他にHTML側で定義しているjsファイルのライブラリの機能は使うことが出来ませんでした。
そうなると、bootstrap.jsなど全てのファイルをimport宣言すること？などと考えたわけです。しかし、それも上手く行かずでした。。
declareを使うことで簡単に解消出来る
上記のことを試したものの、これは現実的ではないよなと思い、違う方法を探りました。
そこで、出てきたのがdeclareというものです。これを使うことで、既存のJavaScriptライブラリに型情報を付加することが出来るということです。簡単にいうと、jQueryで使っている変数をTypeScript側で参照出来るようにするというものです！
書き方は非常にシンプルで、以下の1行だけです。
declare var $:any;
これのおかげで、jQueryの$をすることが出来るようになり、TypeScriptのファイル内でも、$に紐付く他のライブラリの機能を使うことが出来るようになりました。
TypeScriptを使い始めたことで、そちら側に全ての処理を持っていきたいのですが、いやはやなんとも大変ですね。。