如何在打字稿中扩展 NuxtRuntimeConfig 接口

Question

我在 nuxt $config 变量中添加一个变量，就像在 docs 中一样。这有效。

我想让打字稿知道这个变化。

在我的 nuxt.config.js 中，我有：

// nuxt.config.js. This is to add the variable
  publicRuntimeConfig: {
    baseUrl: process.env.URL || 'http://localhost:3000',
  }

我尝试像这样扩展界面

// vue.shim.ts
declare module '@nuxt/types' {
  interface NuxtRuntimeConfig {
    baseUrl: string
  }
}

然而 vscode 仍然没有改变

const { $content, route, $config } = useContext()
console.log($config.baseUrl) // typescript does not no about baseUrl, but it exists

Answer 1

你就快到了！

你必须用来触发接口合并的模块实际上是类型文件的路径。所以在这里，它是@nuxt > types > config > runtime.d.ts

declare module '@nuxt/types/config/runtime' {
  interface NuxtRuntimeConfig {
    baseUrl: string
  }
}