透過 100 多個技巧的集合來學習 Nuxt!

TypeScript

Nuxt 完全類型化,並提供有用的快捷方式,以確保您在編碼時可以存取準確的類型資訊。

類型檢查

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

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

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 devnuxi build 時,Nuxt 會產生以下檔案以支援 IDE 類型(和類型檢查)

.nuxt/nuxt.d.ts

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

檔案中的某些參考指向僅在您的 buildDir (.nuxt) 中產生的檔案,因此為了獲得完整的類型定義,您需要執行 nuxi devnuxi 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
} })