TypeScript をインストールせずに型チェックしたい
以前「TS の型定義だりー」的な記事を書いて軽く燃えたこともあったが、やはり自分が作る程度の小さなアプリでは、依存関係をできるだけ減らしておきたいと思っている。
- SPA フレームワークを使えば半年ごとにメジャーバージョンアップし、
- SCSS を使えば Sass ライブラリの
npm installに失敗するように経年変化する - Express.js くらい成熟したフレームワークでもいつの間にか周辺ツールが Deprecated になったり、
- Node.js 界隈の O/R マッパーライブラリは破壊的変更が多くて追従が大変だ
- Linter と Formatter はプラグイン単位で更新が入り、
- テスティングフレームワークは特に E2E 系がブラウザのバージョンアップですぐ動かなくなる
みたいな感じで、闇雲に「モダン・フロントエンド」なプロジェクトを作ろうとするとすぐに依存パッケージが増えてしまい、定期的なメンテナンスのコストが膨大になる。
仕事でやらされてるならまだいいんだ。面倒臭いだけで本質的な成果がないマイグレーション作業で給料がもらえるんだから、意味ねーくだらねーと思いながらでも別にやる。でも、自分一人で作って使いたいようなモノでそういうメンテナンスコストを増やしたくないのだ。
だから自分はなるべく、トランスパイルが必要ない素の Node.js や JavaScript、CSS を書いて、ビルドなしに書いたコードがそのまま動くような小さなアプリを作りたいと考えている。
しかし、JS のコードを書いている時、この引数が string 型なのか number 型なのか、ぐらいは示しておきたいなーと思うことはあったりする。
実は、JSDoc というドキュメンテーションコメントを書くことで、関数の戻り値の型や引数の型を示したりできる。
TypeScript のように言語構文として型定義するワケではなく、コメントとして書くので、プロジェクトに typescript パッケージをインストールする必要はないし、トランスパイルも不要だ。
コードを書く時は VSCode で作業するので、VSCode 上でこの JSDoc を読み取り、型チェックをしてくれれば十分なのでは？ と思い、設定手順を確認してみた。
- 参考 : VS Code supports JSDoc-powered type checking | Stefan Judis Web Development
- 設定を試行錯誤するに際して、この記事が参考になった
色々こしらえてみたサンプルプロジェクトは以下。
VSCode には拡張機能の「ESLint」dbaeumer.vscode-eslint をインストールしておく。あとは VSCode の標準機能との合わせ技で、JS ファイルの型チェック、JSDoc の読み取りができるようになる。
プロジェクトに npm パッケージとしてインストールしているのは、eslint と eslint-plugin-jsdoc という JSDoc 部分をチェックするためのプラグインのみ。ホントは eslint も依存関係に持ちたくないぐらいサボりたいのだが、現状諦めている…。使用するルールを .eslintrc.js で定義しておく。
んで、VSCode エディタ上で型チェックを行わせるには、jsconfig.json というファイルを作ってやる。tsconfig.json (TS) ではなく、JS である。
{
"compilerOptions": {
"checkJs": true
}
}
jsconfig.json では checkJs というオプションだけ有効にすれば良い。
もしくは、.js ファイルの1行目に // @ts-check というコメントを書くことでも型チェックを有効にできる。
コレで、.js ファイルを VSCode で開いた時に、型不正があればエラーが出たり、JSDoc が正しく書けていないとワーニングが出たりするようになる。プロジェクトには typescript パッケージをインストールしてもいなければ、.ts ファイルでもない。index.js にはわざとエラーになるコードを書いてあるので、git clone して VSCode でプロジェクトを開いてみると、型エラーなどが確認できことだろう。
ESLint 関連のワーニングが上手く表示されない場合は、VSCode のユーザ設定 (settings.json) で eslint.enable や eslint.quiet を設定しているのかもしれない。自分の環境で試した限り、プロジェクトローカルに置いた .vscode/settings.json では上手くユーザ設定を上書き設定できなかったので、ユーザ設定に注意。ココら辺 VSCode の仕組みがよく分かっていない。
とりあえずこんな感じで、素の JS を書きながら、JSDoc で型を示し、型不正な代入などがあれば VSCode 上でワーニングを表示させる、といったことが可能になった。よきよき。
