TypeScript

Nuxt は完全に型付けされており、コーディング時に正確な型情報にアクセスできる便利なショートカットを提供します。

型チェック

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

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

npm install --save-dev vue-tsc typescript

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

ターミナル
npx nuxt typecheck

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

nuxt.config.ts
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

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

デフォルト以外のディレクトリを含めるには、nuxt.config の imports セクションの使用を検討してください。これは、アプリ全体で使用している型を自動インポートするのに役立ちます。

この設定を拡張する方法の詳細はこちら.

Daniel Roe が組み込みの Nuxt エイリアスについて説明しているビデオをご覧ください。
Nitro は API ルートの 型を自動生成 します。さらに、Nuxt はグローバルに利用可能なコンポーネントの型と、コンポーザブルからの自動インポート、その他の中核機能の型も生成します。
後方互換性のため、Nuxt は引き続き ./.nuxt/tsconfig.json を生成します。ただし、より優れた型安全性とパフォーマンスのために、新しい設定ファイル (.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json など) で TypeScript プロジェクト参照 を使用することをお勧めします。./.nuxt/tsconfig.json を拡張する場合、すべてのオプションは tsconfig.json で定義されたものによって上書きされることに注意してください。"compilerOptions.paths" などのオプションを独自の設定で上書きすると、TypeScript がモジュール解決を考慮しなくなり、#imports などのモジュール解決が認識されなくなる可能性があります。オプションをさらに拡張する必要がある場合は、nuxt.config 内の alias プロパティ を使用できます。Nuxt はそれらを認識し、生成された TypeScript 設定をそれに応じて拡張します。

プロジェクト参照

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 はより高速な IntelliSense とエラーチェックを提供できます
  • 分離されたコンパイル: アプリケーションの一部のエラーが他の部分のコンパイルを妨げません
  • 明確な依存関係管理: 各プロジェクトはその依存関係を明示的に宣言します
プロジェクト参照の設定は Nuxt によって自動的に処理されます。通常、これらの設定を手動で変更する必要はありませんが、それらがどのように機能するかを理解することは、型チェックの問題をトラブルシューティングするのに役立ちます。

プロジェクト参照による型の拡張

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

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

同様に

  • server コンテキストの場合、拡張ファイルを server/ ディレクトリに配置します。
  • アプリとサーバー間で共有される型の場合は、ファイルを shared/ ディレクトリに配置します。
これらのディレクトリの外で型を拡張しても、TypeScript によって認識されません。

厳密なチェック

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

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

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

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    strict: false,
  },
})