Vueでscript部分のみ型チェックする最も簡単な方法

概要

Vueプロジェクトに型を付けていく際、SFCファイルの<script>部分だけ型チェックできると便利な場合があります。

しかし長い間そのような機能は公式で提供されておらず、かなり Hacky な方法でしかそれを実現できませんでした。

ただ最近になって調べてみたところ、ドキュメント化されていないオプションでそれが実現できるとわかったので、ここにメモしておきます。

方法

tsconfig.jsonに以下のオプションを追加し、vue-tsc --noEmitを実行するだけです。

  "compilerOptions": ...,
+ "vueCompilerOptions": {
+   "skipTemplateCodegen": true
+ },

これだけで型チェックの対象から<template>部分が除外されます。
便利な世の中になったものですね。

補足

• このオプションによりエディタ上でも型チェックや一部補完が行われなくなります。
• ドキュメント化されてないオプションですが、experimental から格上げされているため、ある程度 stable と思われます。

ソース

• 関連Issue
• VueCompilerOptionsのスキーマ定義