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

此檔案包含您專案的推薦基本 TypeScript 配置，包括 Nuxt 或您使用的模組注入的已解析別名，因此您可以獲得別名（如 ~/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 可以提供更快的智慧感知和錯誤檢查
  • 隔離編譯：應用程式一部分中的錯誤不會阻止其他部分的編譯
  • 更清晰的依賴管理：每個專案都明確宣告其依賴項
專案引用設定由 Nuxt 自動處理。您通常不需要手動修改這些配置，但瞭解它們的工作原理可以幫助您解決型別檢查問題。

使用專案引用增強型別

由於專案分為多個型別上下文，因此在正確的上下文中增強型別以確保它們被正確識別非常重要。

例如，如果您想為 app 上下文增強型別，則增強檔案應放在 app/ 目錄中。

類似地

  • 對於 server 上下文，將增強檔案放在 server/ 目錄中。
  • 對於在應用程式和伺服器之間共享的型別，將檔案放在 shared/ 目錄中。
在這些目錄之外增強型別將不被 TypeScript 識別。

嚴格檢查

TypeScript 附帶某些檢查，以提供更高的程式安全性和分析。

嚴格檢查在 Nuxt 中預設啟用，以提供更高的型別安全。

如果您當前正在將程式碼庫轉換為 TypeScript，您可能希望透過在 nuxt.config 中將 strict 設定為 false 來暫時停用嚴格檢查。

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