在Vue里面写TS的方式
图中内容应写在script中的lang="ts" 。
上图：使用 Vue.extend的基础用法。
下图：基于类的Vue组件
通过对比我们发现，上面的编码方式更接近我们平时JS的写法，但是我们并不能感受到ts的类型检查和类型推断。
下面张图的写法更有助于我们得到ts的类型检查。这需要我们引入 vue-class-component ，虽然template中还是不能得到补全，但是script 中的内容得到了更好的补全。 下面我们了解一下vue-class-component的作用。
vue-class-component & vue-property-decorator
vue-class-component 强化 Vue 组件，使用装饰器语法使 Vue 组件更好的跟TS结合使用。
vue-property-decorator在 vue-class-component 的基础上增加了更多与 Vue 相关的装饰器，使Vue组件更好的跟TS结合使用。
这两者都是离不开装饰器的，（decorator）装饰器已在ES提案中。Decorator是装饰器模式的实践。装饰器模式呢，它是继承关系的一个替代方案。动态地给对象添加额外的职责。在不改变接口的前提下，增强类的性能。下面我们以 钢铁侠 为例讲解如何使用 ES7 的 decorator。
以钢铁侠为例，钢铁侠本质是一个人，只是“装饰”了很多武器方才变得那么 NB，不过再怎么装饰他还是一个人，它本质是没有被改变的。所以，装饰器没有改变其继承关系，但也同样能够为它添加很多厉害的技能。简单的说，装饰器是在不修改一个类的继承关系的前提下，为一个类修改或添加成员。