nuxt logo

ドキュメント翻訳(非公式)

Nuxt.js
Version:v3.17

TypeScript

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

型チェック

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

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

npm install --save-dev vue-tsc typescript

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

Terminal
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.json

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

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

この設定を拡張する方法について詳しく読む.

Daniel RoeによるNuxtの組み込みエイリアスの説明ビデオを視聴してください。

NitroはAPIルートのために自動生成された型も提供します。さらに、Nuxtはグローバルに利用可能なコンポーネントやコンポーザブルからの自動インポート、その他のコア機能の型も生成します。

./.nuxt/tsconfig.json から拡張されたすべてのオプションは、tsconfig.json で定義されたオプションによって上書きされることに注意してください。 "compilerOptions.paths" のようなオプションを独自の設定で上書きすると、TypeScriptが ./.nuxt/tsconfig.json からのモジュール解決を考慮しなくなります。これにより、#imports のようなモジュール解決が認識されなくなる可能性があります。 :br :br ./.nuxt/tsconfig.json で提供されるオプションをさらに拡張する必要がある場合は、nuxt.config 内の alias プロパティ を使用できます。Nuxtはそれらを拾い上げて ./.nuxt/tsconfig.json を適切に拡張します。

厳格なチェック

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

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

現在コードベースをTypeScriptに変換している場合、一時的に厳格なチェックを無効にするために、nuxt.configstrictfalse に設定することを検討するかもしれません:

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