TypeScript

Nuxt Bridge で TypeScript を使用する方法を学びます。

モジュールの削除

  • @nuxt/typescript-build を削除します。Bridge には同じ機能が備わっています。
  • @nuxt/typescript-runtimenuxt-ts を削除します。Nuxt 2 にはランタイムサポートが組み込まれています。

bridge.typescript を設定します

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    typescript: true,
    nitro: false, // If migration to Nitro is complete, set to true
  },
})

tsconfig.json を更新します

TypeScript を使用している場合は、tsconfig.json を編集して自動生成された Nuxt 型を利用できます。

tsconfig.json
{
+ "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    ...
  }
}
.nuxt/tsconfig.json は生成されるファイルでありバージョン管理されないため、テストを実行する前にこのファイルを生成する必要があります。テストの前に nuxi prepare ステップを追加してください。そうしないと TS5083: Cannot read file '~/.nuxt/tsconfig.json' が表示されます。最新の Nuxt プロジェクトでは、.nuxt/tsconfig.json を直接拡張する代わりに、TypeScript のプロジェクト参照を使用することをお勧めします。
./.nuxt/tsconfig.json から拡張されたすべてのオプションは、ご自身の tsconfig.json で定義されたオプションによって上書きされることに注意してください。"compilerOptions.paths" などのオプションを独自の構成で上書きすると、TypeScript は ./.nuxt/tsconfig.json からのモジュール解決を考慮しなくなります。これにより、#imports などのモジュール解決が認識されない可能性があります。./.nuxt/tsconfig.json によって提供されるオプションをさらに拡張する必要がある場合は、nuxt.config 内の alias プロパティを使用できます。nuxi はそれらを認識し、それに応じて ./.nuxt/tsconfig.json を拡張します。