Nuxt Nation カンファレンス開催!11月12日~13日、ご参加ください。

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は生成され、バージョン管理にチェックインされないため、テストを実行する前にそのファイルを生成する必要があります。TS5083: Cannot read file '~/.nuxt/tsconfig.json'が表示されないように、テストの前にnuxi prepareをステップとして追加してください。
./.nuxt/tsconfig.jsonから拡張されたすべてのオプションは、tsconfig.jsonで定義されたオプションによって上書きされることに注意してください。"compilerOptions.paths"などのオプションを独自の構成で上書きすると、TypeScriptは./.nuxt/tsconfig.jsonからのモジュール解決を考慮しなくなります。これにより、#importsなどのモジュール解決が認識されなくなる可能性があります。./.nuxt/tsconfig.jsonによって提供されるオプションをさらに拡張する必要がある場合は、nuxt.config内でaliasプロパティを使用できます。nuxiはそれらを拾って./.nuxt/tsconfig.jsonを適切に拡張します。