TypeScript一种基于javascript更为严谨的写法，JS只有在运行时候才能提示错误，但TS能编译的时候就能给你提示错误，比起JS更加智能。
一、对比JS和TS在vue-cli写法不同区别
JS开头固定模板
<script lang="js">
export default {
...
}
</script>
TS开头固定的模板：
<script lang="ts">
import Vue from 'vue';
import {Component} from 'vue-property-decorator';
@Component
export default class Types extends Vue { //Types是组件名字
...
}
</script>
1、通过例子简单对比data、methods、props使用时候的不同：
<li :class="type === '-' && 'selected'" @click="selectedType('-')">支出</li>
JS写法
<script lang="js">
export default {
name: 'Types',
props:['xxx'], //外部传入数据xxx
data() { //data是一种方法
return {
type: '-' //'-'表示支出，'+'表示收入
};
},
mounted(){ //生命周期
console.log(this.xxx)
},
methods: {
selectedType(type) { //type只能是'-'和'+'其中一个
if (type !== '-' && type !== '+') {
throw new Error('type is unknown');
}
this.type = type;
}
}
};
</script>
TS写法
<script lang="ts">
import Vue from 'vue';
import {Component, Prop} from 'vue-property-decorator'; //引用需要加入Prop
@Component
export default class Types extends Vue { //Types是组件名字
type = '-'; //'-'表示支出，'+'表示收入
@Prop(Number) xxx: number | undefined;
//prop 告诉Vue xxx不是data,而是prop
//Number 告诉 Vue xxx是个Number
//xxx是属性名
//number | undefined 就是xxx的类型
selectedType(type: string) { //type只能是'-'和'+'其中一个
if (type !== '-' && type !== '+') {
throw new Error('type is unknown');
}
this.type = type;
}
mounted() {
if(this.xxx ===undefined){ //如果变量在上面说有可能是undefined类型，都有事先做个判断
console.log('没有xxx')
}else{
console.log(this.xxx.toString())
}``
}
};
</script>
这里重点对比一下props是怎么引入的。包括TS其他内容使用都是通过这个库vue-property-decorator例子进行的，有空可以去看看文档怎么用。
你如果发现你的TS写的代码有错，但是没有提示错误，你得先去设置一下：file--settings--Language &Framework--TypeScript--选择Node interpreter中node路径--点击OK
9.png
。
二、TS是怎样实现严谨的（以上述例子为例）
1、TS对比JS最大区别就是明确每个变量的类型
这里就提示我们要补充上type类型是啥
2、如果xxx类型在上面例子没有提到undefined，就会出现下图提示
5.png
3、同样如果yyy不是一个方法或者函数，同样出现报错。
6.png
没有报错，因为后面接的是toString()方法
三、图解TS和JS过程
1.png
8.png
