安裝設定

Nuxt 的 TypeScript 支援主要是透過 @nuxt/typescript-build 這個 Nuxt 模組提供。

此章節提供了該如何安裝以及設定的方法。

安裝

yarn add --dev @nuxt/typescript-build @nuxt/types

npm install --save-dev @nuxt/typescript-build @nuxt/types

設定

你只需要在 nuxt.config.ts 中的 buildModules 中加入 @nuxt/typescript-build

nuxt.config.ts
import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  buildModules: ['@nuxt/typescript-build']
}

export default config

然後再建立 tsconfig.json 檔案 :

tsconfig.json
{
  "compilerOptions": {
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@nuxt/typescript-build",
      "@types/node"
    ]
  },
  "exclude": [
    "node_modules"
  ]
}

請注意，若你要使用 Optional Chaining 和 Nullish Coalescing 語法，請將 tsconfig 中的 target 設定成 ES2018。如果你設定成 ESNext 的話，則不會如期運作，因為目前看起來尚未支援。

你也需要加入下方的 型別聲明檔 來為 Vue 提供 型別

vue-shim.d.ts
declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

查看 TypeScript 文件 來得知 編譯器 的更多選項。

如果你是透過程式化的方式來建立一個自定義伺服器框架時，請注意: 你需要確保在 Nuxt 建置 (Building) 之前就已經準備好 (Ready):

// 確保再繼續之前等待 Nuxt 載入 @nuxt/typescript-build
await nuxt.ready()
...
if (config.dev) {
  const builder = new Builder(nuxt)
  await builder.build()
}

你已經設定好在 layouts, components, plugins 和 middlewares 中使用 TypeScript，就這麼簡單 !

你也可以在 更多使用方式 中幫助你了解 Nuxt 專案使用 TypeScript 的其他方式。

選項

typeCheck

在不同的程序中啟用 TypeScript 的型別檢查。

  • 型別: Boolean or Object
  • 預設: true

當開啟時， Nuxt 會使用 fork-ts-checker-webpack-plugin 來啟用型別檢查。

你也可以透過傳入 Object 來覆寫選項，或是設定成 false 不啟用。

ignoreNotFoundWarnings

隱藏 未找到 TypeScript 警告。

  • 型別: Boolean
  • 預設: false

當選項啟用後，可以隱藏 export ... was not found ... 的警告。

在這個連結中可以了解更多資訊

警告: 這個選項啟用時可能會把你想看到的一些警告一起隱藏了，在開啟之前請三思。

loaders

自定義 ts-loader 選項

  • 型別: Object

如果你需要額外新增自定義的 TypeScript loader 選項，可以在 loaders.ts 和 loaders.tsx 選項中分別設定 ts 及 tsx 這兩種不同的檔案類型選項。

nuxt.config.ts
import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  typescript: {
    loaders: {
      ts: {
        silent: true
      },
      tsx: {
        silent: true
      }
    }
  }
}

export default config
介紹 Runtime (可選)