我们想要让 TypeScript 正确推断 Vue 组件选项中的类型,需要使用 Vue.component 或 Vue.extend 定义组件。
import Vue from "vue";
const Component = Vue.extend({
// 类型推断已启用
});
const Component = {
// 这里不会有类型推断,
// 因为 TypeScript 不能确认这是 Vue 组件的选项
};
如果小伙伴在声明组件时更喜欢基于类的 API,可以选择使用 Vue官方维护的 vue-class-component 装饰器:
import Vue from "vue";
import Component from "vue-class-component";
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
// 所有的组件选项都可以放在这里
template: '<button @click="onClick">Click!</button>',
})
export default class MyComponent extends Vue {
// 初始数据可以直接声明为实例的 property
message: string = "Hello!";
// 组件方法也可以直接声明为实例的方法
onClick(): void {
window.alert(this.message);
}
}
class API + decorator
- 将一个函数放在类的定义前,以@开头,会自动执行函数并把类作为参数传递给函数
- 扩展类的属性的一种方式