vue-shim.d.ts：由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目根目录下，例如 src/vue-shim.d.ts。
在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，不过再怎么装饰他还是一个人，它本质是没有被改变的。所以，装饰器没有改变其继承关系，但也同样能够为它添加很多厉害的技能。简单的说，装饰器是在不修改一个类的继承关系的前提下，为一个类修改或添加成员。
装饰器主要接收的三个参数： target 要在其上定义属性的对象。 key 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。下面我们通过代码中我们为一个人添加了飞行的功能：
typescript VS JavaScript
了解了上面的基础知识，现在我将同一段代码分别使用js 和 ts来书写，现在我们来对比他们之间的差别。
Props (Properties) 使用js，我们有很多中方式来定义组件的 Props，但是大多都掺杂了 Vue 的私有特征，与 ES 格格不入，例如左边的代码，明明我们是把这个对象的 prop 属性定义成为了一个包含两个 string 元素的对象，但是我们却可以直接通过这个对象来访问 "name" 字段，这很明显是不符合 ES 语义的。再来看看右边的 TS 选手，通过 Prop 装饰器把指定的字段标记为了 Prop，既保留了 ES 语法的语义，而且还能与 Vue 完美的配合，更棒的是，我们可以在编码的过程中享受 TS 对 Prop 字段的静态类型检查。Method 和 data 再来看看 Method，JS 中定义 method 还是有我们上面提到的那个不符合 ES 语义的毛病。而在 TS 中，method 不需要额外的装饰器——实例方法就会自动成为 Vue 组件的 method。类似的还有 data ，使用 TS 的语法，实例字段即可自动成为 Vue 组件的 data。Computed 在传统的使用 JS 编写的 Vue 代码中，如果要定义计算属性，我们需要在 computed 属性中定义相应的函数。而这在 ES 中其实早就已经有了对应语义的语法——getter，所以在使用了 vue-class-component 的 vue 组件中，我们可以直接使用 getter 来定义计算属性，不管是在语法上还是在语义上，相比普通的 JS 都略胜一筹
总结：我们使用vue-class-component让vue组件的定义更加符合ES语义，使得TS能够更好的进行语法分析，并基于此进行类型检查。
业务场景中使用TS + Vue
1. 在Vue项目中定义data和props
这样的写法，让我产生了两个疑惑。
1.1 为什么使用 的写法 @Prop(Number!:) propA!: number 而不是 @Prop(Number) propA: number
1.2 为什么Prop需要前后写两次类型？
自我自答环节：