美文网首页
ts vue-property-decorator 项目拿不到V

ts vue-property-decorator 项目拿不到V

作者: 佚名猫 | 来源:发表于2023-10-23 11:27 被阅读0次

报错:TS2339: Property '$message' does not exist on type 'XXX.

vue2.6.11 + TS 项目,vue文件写法如下:

import { Component, Vue } from 'vue-property-decorator';

@Component({
  name: 'template',
})
export default class template extends Vue {
  initPage() {
    this.$message({ type: 'success', message: '初始化' });
  }
}

分析过程:

1、在main.ts打印 console.log(Vue.prototype)是有 message 的;但是在.vue文件打印 console.log(this) 没有message;
2、于是在项目引用 this.$message 地方,如下操作:

initPage() {
     (this as any).$message({ type: 'success', message: '初始化' });
 }

错误不报了,也可以正常运行,说明 extends Vue 的写法,this 声明的类型不全,导致获取不到 Vue.prototype 上的方法;
3、于是在shims-tsx.d.ts 文件进行类型的声明;

declare module 'vue/types/vue' {
  interface Vue {
    $message: any;
  }
}

vue文件正常引用,不报错了

initPage() {
     this.$message({ type: 'success', message: '初始化' });
 }

相关文章

网友评论

      本文标题:ts vue-property-decorator 项目拿不到V

      本文链接:https://www.haomeiwen.com/subject/zttjidtx.html