Vue+TypeScript

现在前端主流的三大框架全是用TypeScript开发的,包括自己使用Vs Code 也是用TS编写的,可见TypeScript强大之处.
最近在学习Ts,ts的官方定义是这样的:TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,能运行在任何浏览器,任何操作系统当中.
由于Javascript是一门脚本语言,虽说一直强调面向对象的编程思想,在es6引入了新的语法糖class之后,js看起来更像是一门面向对象的语言,但Ts不同里面有很多新的概念,例如;接口   元组.
接口为了大家方便理解,我举一个通俗易懂的例子.
门是一个类,电子门是一个子类.那么电子门上的电子锁也可以装在其他的地方对吧.那我们把这个电子锁抽象提取出来写成一个接口.只要有用的到电子锁的地方我们就去调用它.
那么元组是什么东西呢?

let a=arr[1,2,3,4,5,6]
//这个是数组
let b=brr["1",2,4,5,6]
//这个是元组

这样写就显而易见了吧.
接下来一起看看vue的es6写法和使用ts写法的区别,如果上手过React的项目就更能容易看懂.
Es6

export default {
  data () {
    return {
      name: '我是JavaScript的写法'
    }
  },
  mounted () {
    this.sayHello()
  },
  computed: {
    MyName() {
      return `My name is ${this.name}`
    }
  },
  methods: {
    sayHello() {
      alert(`hello Es6`)
    },
  }
}

再让我们来对比Ts的写法

import Vue from "vue";
import Component from "vue-class-component";
//vue-class-component是官方维护的TypeScript装饰器
@Component
export default class App extends Vue {
  name:string = '我是TypeScript'
  //这里name强制定义了数据类型,如果在后面跟Number会报错
  //在java中所有的变量必须先声明、后使用指定类型的变量只能接受类型与之匹配值。
  // int a=8
  // String username="hello" 
  //在js中我们是这样的
  // var a=1 或者是 var a="hello" 
  
  // computed
  get MyName():string {
    return `My name is ${this.name}`
  }

  // methods
  sayHello():void {
    alert(`hello TypeScript`)
  }
  mounted() {
    this.sayHello();
  }
}

二者的区别并不是非常的大.
看到这里对可能也有了初步的认识吧.