背景:项目是 vue2.6.xx + TS + 二开组件(基于 elment-ui 开发) ,项目完全可以脱离安装 elment-ui ,直接安装二开组件;二开组件支持 elment-ui 原有写法,直接引用二开组件的 this.$message,就出现如下问题;
报错:TS2339: Property ‘$message’ does not exist on type 'XXX.
vue2.6.xx + 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: '初始化' });
}