【Nuxt3アップグレード】エディタがTypeScriptを認識しない問題

ぱぱっと解決しちゃいたい人はこちら
https://nuxt.com/docs/guide/concepts/typescript

公式ページを隅々まで見ればいい話だった。

前提

• Nuxt2のプロジェクトが存在する
• TypeScriptを使用している
• エディタが真っ赤
• Nuxt3へのアップデートを検討している

エラーの原因

Nuxt3は、TypeScriptの設定や型定義が大幅に変更されています。そのため、Nuxt2の設定がそのままではNuxt3と互換性がなく、エディタ上でのTypeScriptエラーが発生することがあります。

例) ts(2345), ts(2307), ts(2304)

tsconfig.jsonの修正

おそらくこちらのコマンドでアップグレードしたかと思います。
※ 全て手作業ではない限り

$ npx nuxi upgrade

便利ですが、tsconfig.jsonまでは修正してくれません。

通常、yarn generate や yarn dev などのコマンドを実行する際に .nuxt/ というフォルダが自動生成されます。

nuxt3からは .nuxt/ の中に tsconfig.json も自動生成されているので、こいつをルートディレクトリのtsconfig.jsonで継承していきます。

// これが自動生成されているやつ
{
  "compilerOptions": {
    "forceConsistentCasingInFileNames": true,
    "jsx": "preserve",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "skipLibCheck": true,
    "strict": true,
    "allowJs": true,
    "baseUrl": XXX,
    "noEmit": true,
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true,
    "types": [
      "node"
    ],
    "paths": {
      "~": [
        "/path/to/dir"
      ],
      "~/*": [
        "/path/to/dir/*"
      ],
      "@": [
        "/path/to/dir"
      ],
      "@/*": [
        "/path/to/dir/*"
      ],
      "~~": [
        "/path/to/dir"
      ],
      "~~/*": [
        "/path/to/dir/*"
      ],
      "@@": [
        "/path/to/dir"
      ],
      "@@/*": [
        "/path/to/dir/*"
      ],
      "assets": [
        "/path/to/dir/assets"
      ],
      "assets/*": [
        "/path/to/dir/assets/*"
      ],
      "public": [
        "/path/to/dir/public"
      ],
      "public/*": [
        "/path/to/dir/public/*"
      ],
      "#app": [
        "/path/to/dir/node_modules/nuxt/dist/app"
      ],
      "#app/*": [
        "/path/to/dir/node_modules/nuxt/dist/app/*"
      ],
      ~~~
    }
  },
  "include": [
    ~~~
  ],
  "exclude": [
    ~~~
  ]
}

自分のtsconfigで継承する

// extends以外はよしなに。
{
  "extends": "./.nuxt/tsconfig.json",
  "esModuleInterop": true,
  "noUnusedLocals": true,

  "compilerOptions": {
    "typeRoots": [
      "./.nuxt",
      "./types",
      "./node_modules/@types"
    ],

    "types": [
      "node"
    ]
  }
}

注意

extends以外の設定 compilerOptions, include, exclude などは継承元の記述を上書きしてしまうので、よく確認して精査しましょう。