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

TypeScript

了解如何搭配 Nuxt Bridge 使用 TypeScript。

移除模組

  • 移除 @nuxt/typescript-build:Bridge 啟用相同功能
  • 移除 @nuxt/typescript-runtimenuxt-ts:Nuxt 2 內建執行階段支援

設定 bridge.typescript

import { defineNuxtConfig } from '@nuxt/bridge'

export default defineNuxtConfig({
  bridge: {
    typescript: true,
    nitro: false // If migration to Nitro is complete, set to true
  }
})

更新 tsconfig.json

如果您使用 TypeScript,可以編輯您的 tsconfig.json 以從自動產生的 Nuxt 類型中獲益

tsconfig.json
{
+ "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    ...
  }
}
由於 .nuxt/tsconfig.json 是自動產生且不納入版本控制,因此您需要在執行測試之前產生該檔案。在您的測試之前新增 nuxi prepare 作為步驟,否則您會看到 TS5083: Cannot read file '~/.nuxt/tsconfig.json'
請記住,從 ./.nuxt/tsconfig.json 擴充的所有選項都會被您在 tsconfig.json 中定義的選項覆蓋。使用您自己的配置覆蓋 "compilerOptions.paths" 等選項會導致 TypeScript 不考慮 ./.nuxt/tsconfig.json 中的模組解析。這可能會導致諸如 #imports 等模組解析無法被識別。如果您需要進一步擴充 ./.nuxt/tsconfig.json 提供的選項,您可以使用 nuxt.config 中的 alias 屬性。nuxi 將會擷取它們並相應地擴充 ./.nuxt/tsconfig.json