型チェック

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

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

npm install --save-dev vue-tsc typescript

その後、nuxt typecheck コマンドを実行して型をチェックします：

npx nuxt typecheck

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

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

自動生成された型

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

.nuxt/nuxt.d.ts

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

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

.nuxt/tsconfig.app.json

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

この設定を拡張する方法についてもっと読む。

プロジェクト参照

NuxtはTypeScriptプロジェクト参照を使用して、型チェックのパフォーマンスを向上させ、より良いIDEサポートを提供します。この機能により、TypeScriptはコードベースをより小さく、管理しやすい部分に分割できます。

Nuxtがプロジェクト参照を使用する方法

nuxt dev または nuxt build を実行すると、Nuxtはアプリケーションの異なる部分のために複数の tsconfig.json ファイルを生成します。

• .nuxt/tsconfig.app.json - アプリケーションコードの設定
• .nuxt/tsconfig.node.json - nuxt.config とモジュールの設定
• .nuxt/tsconfig.server.json - サーバーサイドコードの設定（該当する場合）
• .nuxt/tsconfig.shared.json - アプリとサーバーのコンテキスト間で共有されるコード（型や環境に依存しないユーティリティなど）
• .nuxt/tsconfig.json - 後方互換性のためのレガシー設定

これらのファイルはそれぞれ、適切な依存関係を参照し、それぞれのコンテキストに最適な型チェックを提供するように設定されています。

プロジェクト参照の利点

• ビルドの高速化: TypeScriptは変更されていないプロジェクトの再ビルドをスキップできます
• より良いIDEパフォーマンス: IDEはより高速なインテリセンスとエラーチェックを提供できます
• 分離されたコンパイル: アプリケーションの一部でのエラーが他の部分のコンパイルを妨げません
• 明確な依存関係管理: 各プロジェクトはその依存関係を明示的に宣言します

プロジェクト参照での型の拡張

プロジェクトが複数の型コンテキストに分割されているため、型が正しく認識されるように正しいコンテキスト内で型を拡張することが重要です。

例えば、app コンテキストの型を拡張したい場合、拡張ファイルは app/ ディレクトリに配置する必要があります。

同様に：

• server コンテキストの場合、拡張ファイルは server/ ディレクトリに配置します。
• アプリとサーバー間で共有される型の場合、ファイルは shared/ ディレクトリに配置します。

厳格なチェック

TypeScriptには、プログラムの安全性と分析を向上させるための特定のチェックがあります。

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

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

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