在 vue 中使用 typescript

我们想要让 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

• 将一个函数放在类的定义前，以@开头，会自动执行函数并把类作为参数传递给函数
• 扩展类的属性的一种方式