提问:nuxt3 + typescript 如何注入NuxtApp自定义属性?
初学Nuxt3
,使用defineNuxtPlugin
的provide
关键字向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文件报错
/**
* types/index.d.ts 尝试通过声明合并扩展NuxtApp类型,但失败了
*/
declare module '#app' {
interface NuxtApp {
$myPlugin (): string
}
}
我希望能够通过类型声明,扩展NuxtApp
全局对象的属性,让使用时typescript不会报错,但目前始终得到“对象的类型为 "unknown"
”的typescript报错。或者有其他什么解决方法吗?
回复
1个回答
test
2024-07-04
已解决~线下跟同事讨论后,尝试去掉 types/index.d.ts
中 declare module '#app'
声明,直接声明 NuxtApp
接口即可。
这与官方文档有点儿出入
对typescript模块定义的作用和功能还是理解不够,虽然知道去掉模块声明即可,但为什么呢?
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容