1.前言类似于如何在React项目中应用TypeScript。要在VUE项目中应用TypeScript，我们需要引入一个库vue-property-decorator，它基于vue-class-component库。这个库是Vue官方推出的支持使用类方法的Vue单文件组件库的主要功能如下：方法可以直接声明为类的成员方法计算属性可以声明为类的属性访问器初始化数据可以声明为类属性数据，render和所有Vue生命周期钩子都可以直接作为类的成员方法使用。所有其他属性都需要放在装饰器中。二、使用vue-property-decorator主要提供以下装饰器@Prop@PropSync@Model@Watch@Provide@Inject@ProvideReactive@InjectReactive@Emit@Ref@Component(vue-class-component提供)Mixins(vue-提供class-component)@ComponentComponentdecorator表示这个类是一个Vue组件，所以即使不设置option也不能省略如果需要定义比如name，components，filters，directives和自定义属性，可以定义它们在Component装饰器中，如下所示：directives:{focus:{//指令的定义inserted:function(el){el.focus()}}}})exportdefaultclassYourCompoentextendsVue{}computed,data,methods这里取消了组件的data和methods属性。以前data返回对象中的属性，mmethods中的方法需要直接定义在Class中，作为类的属性和方法@ComponentexportdefaultclassHelloDecoratorextendsVue{count:number=123//类属性相当于前面的dataadd():number{//类方法就是之前的方法this.count+1}//获取计算属性gettotal():number{returnthis.count+1}//设置计算属性settotal(param:number):void{this.count=param}}@props组件接收属性的装饰器，使用如下：import{Component,Vue,Prop}fromvue-property-decorator;@ComponentexportdefaultclassYourComponenttextendsVue{@Prop(String)propA:string;@Prop([String,Number])propB:string|number;@Prop({type:String,//type:[String,Number]default:'defaultvalue',//一般为String或Number//如果是对象或数组默认值从工厂函数返回//default:()=>{//return['a','b']//}required:true,validator:(value)=>{return['InProcess','Settled'].indexOf(value)!==-1}})propC:string;}@watch其实就是Vue中的监听器，如下：:string){}@Watch('person',{immediate:true,deep:true})onPersonChanged1(val:Person,oldVal:Person){}@Watch('person')onPersonChanged2(val:Person,oldVal:Person){}}@emitvue-property-decorator@emitvue-property-decorator提供的@Emit装饰器，用于替换事件触发器$emit在Vue中，如下：import{Vue,Component,Emit}from'vue-property-decorator';@Component({})exportdefaultclassSomeextendsVue{mounted(){this.$on('emit-todo',function(n){console.log(n)})this.emitTodo('world');}@Emit()emitTodo(n:string){console.log('hello');}}3.总结可以看到上述typescript版本的vue类的语法与通常使用的javascript版本有很大不同。很多地方都会用到类和装饰器，其实本质是一样的。只有不断地书写，才能得心应手
