Nuxt 2.8の生成するtsconfig.jsonを使うとIntelliJ(WebStorm、PhpStorm等)がCannot find moduleエラーを吐く #TypeScript

※本記事の修正方法は、試行錯誤の結果導き出したもので、Nuxtのビルドシステムの全体的な理解を欠いた不十分なソリューションである可能性があります。ご了承ください

不具合の概要

Nuxt.jsでプロジェクトを作成し、公式の手順でTypeScriptサポートを有効にすると、IntelliJ系のIDEが以下のように「TS2307: Cannot find module」エラーを吐く状態になってしまいます。

※手元の環境はWebStorm 2019.1.3、Nuxt 2.8.1、TypeScript 3.5.3

直し方

*.vue の型定義を shims-vue.d.ts という名前で作成し、これをプロジェクトのルートディレクトリに置きます。

shims-vue.d.ts

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

次に、tsconfig.json の設定を調整し、 *.vue （と、ついでにtsも）をincludeします。

tsconfig,.json

  "files": [
    "shims-vue.d.ts"
  ],
  "include": [
    "components/**/*.ts",
    "components/**/*.vue",
    "layouts/**/*.ts",
    "layouts/**/*.vue",
    "pages/**/*.ts",
    "pages/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]

これによって、IDEのエラーが消え、モジュールの解決が動作するようになります。

修正後のプロジェクトは以下のリポジトリに置いてます。
https://github.com/ryo-utsunomiya/nuxt-ts

shims-vue.d.ts がなぜ必要かについては以下のissueに詳しいです。
https://github.com/vuejs/vue-cli/issues/1198
簡単にいうと、実際のビルドには不要ですが、IDE(WebStorm/VSCode等)がCannot find moduleエラーを吐かないようにするために必要なファイルです。ちなみに、vue-cliでTypeScriptサポートを有効にした場合はsrc配下に配置されます。

Nuxt + TypeScriptプロジェクトの構築手順

本記事で使用したプロジェクトの構築手順を、最後に書いておきます。

npx create-nuxt-app nuxt-ts

選択はミニマムで（パッケージマネージャはyarnにしてますがnpmでも問題ないです）。

cd nuxt-ts
yarn add -D @nuxt/typescript
yarn add ts-node
touch tsconfig.json
yarn nuxt

ここまででTypeScriptのセットアップ完了。

次に、.vueファイルの中でTypeScriptを使うため、pages/index.vue のscriptタグに lang="ts"を追加。

pages/index.vue

<script lang="ts">

pages/index.vue の中で以下のようなコードを書くと、型チェックエラーが発生します

const add = (a:number, b:number) => a + b;
add("a", "b");