Vue.js: `vue-tsc`でSFC内のtemplateも含めてTypeScriptの型チェックを行うMEMO

vue-tscなるものを使うとSFC内のtemplate部分も含めて型チェックを行えて便利っぽいようなので使い方とかをメモ

www.npmjs.com

vue-tscとは？

vue-tscとはVeturの後継であるVolar内で管理されているライブラリです。

github.com

vue-tsc Type-check and dts build command line tool

上記の通りSFC内のテンプレートを含めた型チェックを行うことができます。

vue-tscの使い方

インストール

以下でinstallします📦

# yarn
yarn add -D vue-tsc

# npm
npm i vue-tsc -D

tsconfig.jsonの設定

以下のVue.jsの公式ドキュメントに記載されている推奨設定をもとにtsconfig.jsonを修正します。

v3.ja.vuejs.org

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "moduleResolution": "node"
  }
}

package.jsonのコマンド

元々TypeScriptでの型チェックを行なっていたコマンドにvue-tsc --noEmitを追記します。

"lint:type-check": "tsc -p . --noEmit && vue-tsc --noEmit",

型チェックの実行

実行すると以下のような形でtemplate部分の型チェック結果が表示されます🙆✨

$ yarn lint:type-check

app/javascript/components/entry/EntryCardCollection.vue:3:32 - error TS2339: Property 'entries' does not exist on type 'never'.

3     <div v-for="entry in props.entries" :key="entry.id" :class="`column is-${clumnSize}`">

VS Code上で警告出す

以下の拡張機能を使うとVS Code上で警告を出せるのでより便利でした。

marketplace.visualstudio.com

※Veturと競合するようなので、Veturは無効化しておくのが良いようです。

おわりに

template部分も型チェックできるの、大分良いですね！！

参考

tech.visasq.com

zenn.dev