Vue.jsの単一ファイルコンポーネントの型チェックを行う場合、webpackでts-loaderを用いて、 build時に型チェックを走らせるやり方があると思うのですが、その場合ts-loaderのtranspileOnlyを有効に出来ないので、build時間がネックになったりします。。。
CLIで型チェックだけ走らせる方法が無いかと調べたところvue-type-checkというnpm packageがあることを初めてしったのでメモしておきます📝
vue-type-checkとは？
vue-type-check is a type checker for typescript written Vue components.
単一ファイルコンポーネントのTypeScriptの型チェックを行ってくれるライブラリで、
コードを見るとVueのLangage ServerのValidationの機能を使って型チェックを実現しているようです👀
vue-type-checkの使い方
以下のようにインストールして、
npm i --save-dev vue-type-check # or yarn add -D vue-type-check
以下のような形で実行します。
vtc --workspace . --srcDir app/javascript/components/ --onlyTypeScript true
--onlyTypeScript trueはREADMEに乗っていないのですが、これを使うとlang='ts'のコンポーネントのみを対象にしてくれます✨
結果は以下のような形で表示されます。
# 成功 ✨ Done in 15.40s. # 失敗 Error in path 40:6 Type 'number' is not assignable to type 'Entry[]'. 38 | resetEntryList: function (): void { > 40 | this.entries = 1; | ^^^^^^^^^^^^ 41 | }, 42 | updateEntryList: function (entries: Entry[]): void {
私は以下のようなスクリプトを作ってtscとvtcをあわせて実行するようにして、CI等で回すようにしてみました🤖
"scripts": { "type:check": "tsc -p . --noEmit && vtc --workspace . --srcDir app/javascript/components/ --onlyTypeScript true", }
コマンドで静的解析で型チェックが出来るようになるとbuildをしなくても型チェックが出来るのでCIとかで回しやすくていいですね✨
