記一次使用微軟大佬出品的《typescript》

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() {

  }
}

 

文章作者: danny