TypeScript 好处
类型提示：更智能的提示
编译时报错：还没运行代码就知道自己写错了
类型检查：无法点出错误的属性
有两个按钮，用JS控制切换，这里我把JS改成了TS
TS是不会使用构造选项的，赋值语句会自动变成实例的属性，实例的属性会默认的变成data，所以直接写 type=' '
<script lang="ts">
import Vue from 'vue'
import {Component} from 'vue-property-decorator';
@Component
export default class Types extends Vue {
type ='-'//'-'表示支出，'+'表示收入
selectType(type:string) {
///type只能是‘-’或者“+”
if (type !== "-" && type !== "+") {
throw new Error("type is unknow");
}
this.type = type;
}
}
先从vue-property-decoratoryin'ru'y引入一个叫做Component的装饰器，然后把装饰器修饰到class上，然后我的class可以声明data和methods。这里面的data就是type ='-'，这句话等价于下面的代码
data() {
return {
type: "-", //'-'表示支出，'+'表示收入
};
},
我的class还可以加上生命周期，比如说
created(){}
mounted(){}
想在ts里面加上prop属性，查了文档之后得到了如下简化后的代码
@Prop(Number) xxx:number|undefined
而且我在另一个文件里引用了xxx
<template>
<div>
<Layout class-prefix="layout">
<Numberpad />
<Types xxx("345678") />
<Notes />
<Tags />
</Layout>
</div>
</template>
首先出了一个控制台报错
告诉我xxx的类型错了，然后我修改了采用了JS的写法
<Types :xxx=345678 />
这次控制台就没有报错，那我使用下这个xxx试一试就出现了第一个报错，TS认为他可能是undefined
那我们判断一遍类型，告诉他如果是undefined就打印出undefined，不是就输出本身，然后再试一试依旧是还没有编译就提示了错误，而且红线只在yyy身上
红线在的地方为什么不一样？
第一次红线是全部，.xxx.yyy都有，说明TS不确定.xxx的类型，所以都标上了，然后我们进行了判断，是不是undefined。第二次红线只有.yyy，是因为无论是number还是undefined是不可能有.yyy这个属性的，那我只好改成.toString（）这个属性了
为什么两次报错地方不一样？
先说一下这里的2个number
@Prop(Number) xxx:number|undefined
第一个Number ，在这里写过之后，VUE就知道了prop的属性是number，下次引用的时候，如果不是number属性，会报错（在控制台里）
第二个number，TS会自动检测你的属性是不是Number，我写完之后，没有编译报了2个错（标红和提示）提示写的是：this.xxx.yyy 可能是undefined（因为上面声明的xxx:number|undefined，检测出了不是Number属性），undefined是不可能有.yyy这个属性的，此时控制台里没有报错，还是上一次JS运行的结果。
总结一下：
@Prop是一个装饰器，告诉Vue,xxx属性不是data是prop，
Number告诉Vue xxx是个Number
xxx是属性名
number|undefined 告诉TS xxx的类型
那回到问题为什么有的是没有编译就报错了，有的在控制台才报错？
这涉及到了编译时和运行时两种概念
很简单，编译时就是编译的时候，运行时就是运行的时候
TS编译成功之后转化为JS，JS运行到浏览器上做出体现，如图所示
@Prop(Number) xxx:number|undefined
再看代码
之前控制台报错，是因为那个地方没有TS，<template>里是JS。是运行时的错误，可以直接反映到浏览器，所以控制台报错
后来编译时候的报错是因为undefined和number都没有.yyy属性，无法让我的TS成功的转化为JS，这属于编译失败，直接在转化成JS时候就被阻拦了，所以浏览器没有报错
TS报错是右边的number引起的，左边的Number是运行时才会引起的的报错，什么是运行时，就是传参的时候。
总结下怎么用TS声明Vue组件。
首先要引入Component和Prop,从vue-property-decorator这个库里面引用。然后要声明一个类Type，在这个类上面必须写@Component。如果要声明data,赋值语句会自动变成实例的属性，实例的属性会默认的变成data，所以直接写 .声明methods也直接写就好了，和js一样。声明Prop类型按照官方文档写@Prop(Number) xxx:number|undefined在Prop的后面（ ）里写一个运行时的类型，在：后面写上编译时的类型，编译时的类型会触发编译报错，运行时的类型会触发运行警告。
