TypeScript · Nuxt 概念

類型檢查

預設情況下，Nuxt 在您執行 nuxi dev 或 nuxi build 時不會檢查類型，這是為了效能考量。

若要在建置或開發時啟用類型檢查，請安裝 vue-tsc 和 typescript 作為開發依賴項

npm install --save-dev vue-tsc typescript

然後，執行 nuxi typecheck 命令來檢查您的類型

終端機

npx nuxi typecheck

若要在建置或開發時啟用類型檢查，您也可以在您的 nuxt.config 檔案中使用 typescript.typeCheck 選項

nuxt.config.ts

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

自動產生的類型

當您執行 nuxi dev 或 nuxi build 時，Nuxt 會產生以下檔案以支援 IDE 類型（和類型檢查）

`.nuxt/nuxt.d.ts`

此檔案包含您正在使用的任何模組的類型，以及 Nuxt 需要的關鍵類型。您的 IDE 應該會自動識別這些類型。

檔案中的某些參考指向僅在您的 buildDir (.nuxt) 中產生的檔案，因此為了取得完整的類型，您需要執行 nuxi dev 或 nuxi build。

`.nuxt/tsconfig.json`

此檔案包含您專案的建議基本 TypeScript 配置，包括 Nuxt 或您正在使用的模組注入的解析別名，因此您可以獲得完整的類型支援，並針對 ~/file 或 #build/file 等別名進行路徑自動完成。

閱讀更多關於如何擴充此配置的資訊.

觀看 Daniel Roe 的影片，說明內建的 Nuxt 別名。

Nitro 也會為 API 路由自動產生類型。此外，Nuxt 還會為全域可用的元件和從您的 composables 自動匯入以及其他核心功能產生類型。

請記住，從 ./.nuxt/tsconfig.json 擴充的所有選項都會被您的 tsconfig.json 中定義的選項覆蓋。使用您自己的配置覆蓋 "compilerOptions.paths" 等選項會導致 TypeScript 不會考慮 ./.nuxt/tsconfig.json 中的模組解析。這可能會導致 #imports 等模組解析無法被識別。

如果您需要進一步擴充 ./.nuxt/tsconfig.json 提供的選項，您可以使用您 nuxt.config 中的 alias 屬性。nuxi 會擷取它們並相應地擴充 ./.nuxt/tsconfig.json。

嚴格檢查

TypeScript 帶有一些檢查，可讓您更安全地分析您的程式。

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

如果您目前正在將您的程式碼庫轉換為 TypeScript，您可能需要暫時停用嚴格檢查，方法是在您的 nuxt.config 中將 strict 設定為 false

nuxt.config.ts

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

ES 模組

Nuxt 使用原生 ES 模組。

程式碼風格

Nuxt 預設支援 ESLint。