JavaScript与TypeScript的区别

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