TypeScript · Nuxtの概念

型チェック

デフォルトでは、パフォーマンス上の理由から、Nuxtはnuxi devまたはnuxi buildを実行するときに型をチェックしません。

ビルド時または開発時に型チェックを有効にするには、vue-tscとtypescriptを開発依存関係としてインストールします。

npm install --save-dev vue-tsc typescript

次に、nuxi typecheckコマンドを実行して型をチェックします。

ターミナル

npx nuxi typecheck

ビルド時に型チェックを有効にするには、nuxt.configファイルのtypescript.typeCheckオプションを使用することもできます。

nuxt.config.ts

export default defineNuxtConfig
({
  typescript
: {
    typeCheck
: true
  }
})

自動生成される型

nuxi devまたはnuxi buildを実行すると、NuxtはIDEの型サポート（および型チェック）のために次のファイルを生成します。

`.nuxt/nuxt.d.ts`

このファイルには、使用しているモジュールの型と、Nuxtに必要な主要な型が含まれています。IDEはこれらの型を自動的に認識する必要があります。

ファイル内のいくつかの参照は、buildDir（.nuxt）内にのみ生成されるファイルへの参照であるため、完全な型情報を取得するには、nuxi devまたはnuxi buildを実行する必要があります。

`.nuxt/tsconfig.json`

このファイルには、プロジェクトに推奨される基本的なTypeScript設定が含まれています。これには、Nuxtまたは使用しているモジュールによって挿入された解決済みのエイリアスが含まれているため、~/fileや#build/fileのようなエイリアスの完全な型サポートとパスの自動補完を取得できます。

この設定を拡張する方法の詳細についてはこちらをご覧ください.

Daniel Roeが組み込みのNuxtエイリアスについて説明するビデオをご覧ください。

Nitroは、APIルートの型も自動生成します。さらに、Nuxtは、グローバルに利用可能なコンポーネントとcomposablesからの自動インポート、およびその他のコア機能の型も生成します。

./.nuxt/tsconfig.jsonから拡張されたすべてのオプションは、tsconfig.jsonで定義されたオプションによって上書きされることに注意してください。"compilerOptions.paths"などのオプションを独自の設定で上書きすると、TypeScriptは./.nuxt/tsconfig.jsonからのモジュール解決を考慮しなくなります。これにより、#importsなどのモジュール解決が認識されなくなる可能性があります。

./.nuxt/tsconfig.jsonで提供されるオプションをさらに拡張する必要がある場合は、nuxt.config内でaliasプロパティを使用できます。nuxiはそれらを検出し、それに応じて./.nuxt/tsconfig.jsonを拡張します。

厳密なチェック

TypeScriptには、プログラムの安全性と分析を高めるための特定のチェックが付属しています。

Nuxtでは、型安全性を高めるために、厳密なチェックがデフォルトで有効になっています。

現在、コードベースをTypeScriptに変換している場合は、nuxt.configでstrictをfalseに設定して、一時的に厳密なチェックを無効にすることができます。

nuxt.config.ts

export default defineNuxtConfig
({
  typescript
: {
    strict
: false
  }
})

ESモジュール

NuxtはネイティブのESモジュールを使用します。

コードスタイル

NuxtはESLintをすぐにサポートします