DOOFOX BLOG

在使用 TypeScript 编写 Vue 时，可能会遇到一些问题，例如 [ts] 类型“Vue”上不存在属性“xxx”。
针对这些问题，你可能需要先对这些方法或变量进行声明。

常见报错

import Vue from 'vue'export
default Vue.extend({
	name:'demo',
	render(h) {
		return h('div', 
		{
			class: 'page-footer-tabs',
			attrs: {
				options: this.options // [ts] 类型“ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record>”上不存在属性“options”。
			},
			on: {
				click: (el) => this.onSwitch(el) // [ts] 类型“Vue”上不存在属性“onSwtich”。
			}
		},
		'hello world')
	},
	methods: {
		onSwtich(el) {}
	}
})

对其进行声明

在文件头部添加相关申明即可。针对共有的方法，可以申明在 vue-shim.d.ts 中

// 针对方法进行声明
declare module 'vue/types/vue' {
	interface Vue {
		onSwtich(el: Element): void
	}
}

// 针对 data 参数进行申明
declare module 'vue/types/options' {
	interface ComponentOptions {
		options?: object
	}
}