Nuxt 3 useNuxtApp() 返回类型未知

Question

我尝试提供一个可在 Nuxt 插件中的所有可组合项和应用程序中使用的帮助程序，代码如下所示：

// hello.ts
export default defineNuxtPlugin(async nuxtApp => {

  nuxtApp.vueApp.provide('hello', (name: string) => `Hello ${name}!`);
  nuxtApp.provide('hello', (name: string) => `Hello ${name}!`)

});

之后，我尝试通过useNuxtApp()在可组合项中使用来调用帮助器，如下所示，但是， useNuxtApp()` 返回的类型未知。

// useHello.ts
export default async function() {
    const nuxtApp = useNuxtApp()
    console.log(nuxtApp.$hello('name'))
}

我得到的错误是nuxtApp.$hello' is of type 'unknown'.

我已遵循文档，但我不明白为什么它返回类型未知。

我错过了什么吗？也许在 nuxt.config.ts 中？

我将衷心感谢您的帮助。

Answer 1

就我而言，我为我的插件创建了一个界面。因此，我使用注入的插件接口创建了 NuxtApp 模块接口。

像这样的事情：

// plugins/api.ts

interface IApi {
  baseURL: string;
  auth: AuthModule;
  ...
}

declare module "#app" {
  interface NuxtApp {
    $api: IApi;
  }
}

export default defineNuxtPlugin((nuxtApp) => {
  /** an object containing all repositories we need to expose */
  const modules: IApi = {
    baseURL: nuxtApp.$config.public.API_BASE_URL,
    auth: new AuthModule(),
    ...
  };

  return {
    provide: {
      api: modules,
    },
  };
})

现在，我可以直接从 useNuxtApp 将具有正确类型界面的插件导入到我的应用程序的任何位置。

  const { $api } = useNuxtApp();
  console.log($api.baseURL)

Answer 2

此错误是在 VsCode 1.79 更新后发生的。该问题与 VsCode TypeScript 版本有关。

1.79版本后Typescript版本更新，“Volar”使用新的Typesript版本。要解决此问题，Ctrl + Shift + p请按“选择 TypeScript 版本”，然后选择“使用工作区版本”。