TypeScriptでjquery-fullscreen.jsなどのマイナーなJSライブラリをフロントエンド環境で使う方法

ちょっとプライベートでJSを使う機会があったのでTypeScriptをチョイスしました。

何十年と開発してきましたが、実は初TypeScript（笑）
どんなものだろうと軽い気持ちで使ってみたところ……地獄を見ました。

目的のものが出来上がるまでに、TypeScriptを理解する時間が10倍ぐらいかっているような気がする。。
大手の採用事例や移行事例なんかを良く見ますが、ちっこい案件だと学習コストも含め、触れない選択が正解な気もしました。

中でも詰まった、外部ライブラリを使うための方法についてメモを残しておきます。
（ネットにある情報もサーバサイドの情報だったりとバラバラなですが、ここで記載するのはフロントエンドでTypeScriptを使った場合です）

超有名ライブラリの場合

js-cookieなどのメジャーなものについてはnodeを使ってインスコできます。

npm install js-cookie

こんな感じですね。

import Cookies from 'js-cookie';

これをimportして使います。

jQueryなどをtsファイル外で読み込んで使いたい場合、

let hogehoge = $('#hogehoge').val();

このように記載するだけでは使えません。

TypeScriptで必要な型が宣言されていないからなんですね。
なので @type という、型ファイルなるものを取り込む必要があるんです。

npm install @types/jquery

これで有志が作った、jQuery 用の@typeファイルが

./node_modules/@types

の配下に展開されて、参照されるようになります。

jquery-fullscreen.jsなどのマイナーライブラリの場合は @types ライブラリが存在しないのでどうすればいいか。

結論。自作すればよかったんです。

@typesが読み込まれる場所は、node_modules以下以外に、デフォルトで src配下の@typesも見に行ってくれるみたいなので、そちらにtypeファイルを作ります。

./js/src/@types/jquery-fullscreen.d.ts

こんな感じのファイル名で、中身はこれ。

interface JQuery {
    fullScreen: any;
}

any宣言なんでやだ（笑）ちゃんと型宣言したい！そんな方はこちらかな。

interface JQuery {
    fullScreen: (state: boolean | void) => boolean;
}

jQueryの追加ライブラリなんで、

$('#view').fullScreen(true);
$('#view').fullScreen();

このような記述のビルドが通るようになります。たいていのライブラリがこの要領で使えるようになりました。