提问:nuxt3 + typescript 如何注入NuxtApp自定义属性?

作者站长头像
站长
· 阅读数 13

初学Nuxt3,使用defineNuxtPluginprovide关键字向NuxtApp对象中注入了辅助函数myPlugin(),但typescript无法检查到注入的myPlugin()函数,并报错"对象的类型为 unknown"

我尝试通过修改 .nuxt/types/plugins.d.ts 内关于NuxtApp的类型定义,在当次开发中有效,但一旦重新运行开发或打包,.nuxt文件夹就会重建。

接着又按照官方文档提示,根目录下新建types/index.d.ts文件,在内部尝试进行类型声明合并,但也不行。

相关代码文件

/**
 * plugins/custom-plugin.ts 自定义辅助函数注入插件
 */
export default defineNuxtPlugin(() => {
  return {
    provide: {
      myPlugin: () => 'this is my plugin'
    }
  }
})
<script setup lang="ts">
/**
 * pages/blog/index.vue 调用插件方法
 */
const { $myPlugin } = useNuxtApp()

console.log($myPlugin());
</script>

<template>
  <div>
    Manage page
    <NuxtLink to="/blog">去博客</NuxtLink>
  </div>
</template>

index.vue文件报错提问:nuxt3 + typescript 如何注入NuxtApp自定义属性?

/**
 * types/index.d.ts 尝试通过声明合并扩展NuxtApp类型,但失败了 
 */
declare module '#app' {
  interface NuxtApp {
    $myPlugin (): string
  }
}

我希望能够通过类型声明,扩展NuxtApp全局对象的属性,让使用时typescript不会报错,但目前始终得到“对象的类型为 "unknown"”的typescript报错。或者有其他什么解决方法吗?

回复
1个回答
avatar
test
2024-07-04

已解决~线下跟同事讨论后,尝试去掉 types/index.d.tsdeclare module '#app' 声明,直接声明 NuxtApp 接口即可。

这与官方文档有点儿出入

对typescript模块定义的作用和功能还是理解不够,虽然知道去掉模块声明即可,但为什么呢?

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容