Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

不具合の概要

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

Screen Shot 2019-07-11 at 0.51.53.png

※手元の環境は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のエラーが消え、モジュールの解決が動作するようになります。

Screen Shot 2019-07-11 at 2.25.41.png

修正後のプロジェクトは以下のリポジトリに置いてます。
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でも問題ないです)。

Screen Shot 2019-07-11 at 0.45.42.png

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 の中で以下のようなコードを書くと、型チェックエラーが発生します :thumbsup:

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

Screen Shot 2019-07-11 at 2.09.42.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした