typescript Nuxt 3扩展了NuxtApp类型,提供自定义插件

x8diyxa7  于 2023-01-18  发布在  TypeScript
关注(0)|答案(2)|浏览(241)

当我向nuxtApp提供插件时,它知道其类型

但是当我试着在页面上使用它时,它只显示类型“any”

我可以添加类型来扩展NuxtApp类型吗?或者我可以做些什么来让它知道插件的正确类型?
我会想到这样的事情

import type { order } from '~/plugins/order'

interface PluginsInjections {
  $order: ReturnType<order>
}

declare global {
  interface NuxtApp extends PluginsInjections {}
}
tnkciper

tnkciper1#

我想通了
我在i18 n插件x1c 0d1x中查找了它是如何完成的
并在types/index.d.ts中对我自己做了同样的操作

import type { order } from '~/plugins/order'

interface PluginsInjections {
  $order: ReturnType<typeof order>
}

declare module '#app' {
  interface NuxtApp extends PluginsInjections {}
}

declare module 'nuxt/dist/app/nuxt' {
  interface NuxtApp extends PluginsInjections {}
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties extends PluginsInjections {}
}

现在它知道插件存在,并帮助自动完成

ijnw1ujt

ijnw1ujt2#

你不需要为插件注入的属性和函数手动添加类型,因为它应该自动工作,如文档中所解释的:www.example.com相反,您应该调查自动检测未按预期工作的原因。https://nuxt.com/docs/guide/directory-structure/plugins#typing-plugins Instead, you should investigate why the automatic detection is not working as expected.
更高级的用例可能要求您手动定义注入属性的类型。在这种情况下,您可以遵循以下示例:

// Your plugin
export default defineNuxtPlugin(() => {
  return {
    provide: {
      hello: (msg: string) => `Hello ${msg}!`
    }
  }
})

// index.d.ts
declare module '#app' {
  interface NuxtApp {
    $hello (msg: string): string
  }
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $hello (msg: string): string
  }
}

export { }

来自:www.example.comhttps://nuxt.com/docs/guide/directory-structure/plugins#advanced
但是请记住,这样做会掩盖代码库中另一个问题的后果,而不是解决根本原因。

相关问题