TypeScript
Nuxtは完全に型付けされており、コーディング時に正確な型情報にアクセスできるようにするための便利なショートカットを提供します。
型チェック
デフォルトでは、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.json
このファイルには、プロジェクトの推奨される基本的なTypeScript設定が含まれており、Nuxtや使用しているモジュールによって注入された解決済みエイリアスが含まれています。これにより、~/file
や #build/file
のようなエイリアスの完全な型サポートとパスの自動補完が可能になります。
デフォルトのディレクトリ以外を含めるために、nuxt.config の imports
セクションを使用することを検討してください。これは、アプリ全体で使用している型を自動インポートするのに役立ちます。
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.config
で strict
を false
に設定することを検討するかもしれません:
export default defineNuxtConfig({
typescript: {
strict: false
}
})
※このページは Nuxt.js 公式ドキュメントの翻訳ページ(非公式)です。
公式ドキュメントの該当ページはこちら:
https://nuxt.com/docs/3.x/guide/concepts/typescript