shims-vue.d.ts 不能扩展vue对象

发布于 2022-09-12 22:59:16 字数 995 浏览 18 评论 0

我最近用ts+vue的过程中遇到了需要扩展vue对象的情况,通过@vue/cli 4.x生成项目,shims-vue.d.ts如下

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

declare module 'test-module'; //自己用js写的模块

想实现功能:通过 vue.minxin(SomeMixin) 了一个 全局mixin,提供了 a属性b方法,因此需要扩展Vue对象的定义使得ts编译不报错。
根据vue-cli官方文档如下
image.png

因此我想在shims-vue.d.ts里面直接对vue对象进行扩展,如下

import Vue from 'vue'
declare module 'vue/types/vue' {
 interface Vue {
   a: string;
   b: () => void
 }
}

declare module '*.vue' {
 export default Vue
}

declare module 'test-module'; //自己用js写的模块

最终结果 不但我想要的对象没有扩展上去,并且之前对*.vue的声明,自定义模块的声明等全部失效。
问题:

  1. 这种全局mixin怎么声明比较好
  2. 如果我想在shims-vue.d.ts里面对vue进行扩展该怎么做(貌似会对以前的声明产生影响)
  3. 为什么我这么修改shims-vue.d.ts会对*.vue文件的声明产生影响

谢谢各位大佬,问题困扰挺久了,找了各种资料,感觉自己还是每太想明白!!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

请叫√我孤独 2022-09-19 22:59:16

image.png

务必要写 declare module 里面,写里面写外面是截然不同的意思……

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文