记一次使用微软大佬出品的《typescript》

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› TypeScript›TypeScript教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

TypeScript是什么？

官网上说TypeScript是JavaScript类型的超集，并且可以编译为纯JavaScript。在任何浏览器，集群（服务器），操作系统上面都可以运行，而且还开源。

我的认知

TypeScript 是 JavaScript 的强类型版本。应用于前段时间通过babel等语言转换脚手架转换为适应任何浏览器的JavaScript语言。而且他是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法，能让前端入门的阶梯会低很多。当然他还会有自己一些增加的新语法例如class / interface / module，更面向对象，阅读性会更加的棒。

为什么要使用TypeScript?

先说说Js的劣势，就是弱类型！在编码的时候，没有明确声明某个属性的类型，写着写着代码就会连自己都不知道究竟最初设想的是什么类型。下面有一个例子说明一下

var a = 12
a = '12'
a = a + 1
console.log(a)  // 121     我期望a是13，但最终的答案不是我想要的

这就是弱类型的劣势，a可以被任何类型的值赋值，这样就很容易造成一些莫名其妙的错误。

那typescript怎么写呢？下面依然是例子

let a : number = 12
a = '12'  //当你这样赋值的时候你的编译器已经报错了  TS2322: Type '0' is not assignable to type 'string'.

ts的语言不允许你原来是number的值赋一个字符串，这样的约束可以让错误在代码编写的时候就可以被发现了！

开始使用现在项目使用TypeScript

我们的部分前端项目也正好在使用TypeScript，省去了很多的配置，但我们的vue还是2.0，对TypeScript的支持不够完善，所以我引入了装饰器的写法，让vue更加趋向类，增强可读性。

我使用的是 vue-property-decorator

import { Vue, Component, Watch } from 'vue-property-decorator';

那么来看看用typeScript+vue-property-decorator和原有vue写法的区别吧~ 因为公司内部代码不方便展示，还是手写一个简单例子作为对比吧！

原来的写法例子

export default {
    components: {
        myInput
    },
    data () {
      return {
          test: 0
      }
    },
    watch: {
      test: {
          handler(n,o){
              console.log(n)
          },
          immediate: true,
          deep: true 
      }
    },
    computed: {
      getDate: {
        get: () => {
          return this.test
        },
        set: val => {
          this.test = val
        }
      }
    },,
    methods: {
        handleClick () {
            this.test = 3
        }
    },
    mounted () {

    }
}

typescript改造的写法

@Component({
  components: {
    myInput
  }
})
export default class Test extends Vue {
  test: number = 0;  //类型声明

  //computed 创建日期Computed
  get testComputed() {
    return this.test
  }

  set testComputed(val) {
    this.test = val
  }

  //watch
  @Watch('test', {deep: true})
  testOnChange(n: number, o: number) {
    console.log(n)
  }

  //methods
  handleClick(val: number) {
    this.test = 3
  }

  private mounted() {

  }
}