TypeScript——初步認識

JavaScript的痛點

衆所周知，前端開發「三劍客」分別是HTML、CSS以及JS，其中JS因爲其靈活簡單等特色得到了你們的青睞，可是成也蕭何敗蕭何，因爲JS設計初衷是瀏覽器的嵌入式腳本語言，做爲腳本語言自己就不像Java等工程語言同樣適合大項目開發。以前用JS寫過前端程序，因爲JS沒有命名空間且變量類型爲弱類型，當代碼寫到幾千行以上時隨着JS文件及變量的增多，程序運行邏輯將會亂成一團，後續開發及維護舉步維艱。這些問題是JS自己特色帶來的，由於JS在設計初始並無想到後面的前端開發邏輯會這麼複雜，雖然JS號稱基於對象的語言，可是卻很難模塊化。爲解決該問題，一些JS模塊化框架應運而生，例如Require.js、sea.js等，但這只是權宜之計，並沒從根本上解決JS自己語言特性。

解決JS語言自己的問題，看起來只有兩種方法，要麼JS實現一次重大升級，要麼從新設計一種語言來代替JS。可是聽起來很美好，實際卻不可行。首先JS發展至今，語言自己相對成熟，最多會小修小補，顛覆性的升級不大可能。其次，JS已經擁有了大批的用戶及獲得了各大瀏覽器的全面支持，能夠當作網頁的一種規範標準了，設計一種全新的語言取代JS基本無望。因而，微軟採用曲線救國，設計了一種TypeScript，定義爲JavaScript的超集。意思就是JavaScript能夠作的，我能夠作，JavaScript不能作的，我還能夠作。同時熟悉JS的遷移到TypeScript上面基本無成本，由於TypeScript全面兼容JavaScript，語法定義等基本相似。

TypeScript方案

TypeScript針對JavaScript弱類型、沒有命名空間、難以模塊化等缺點對症下藥，規定了變量必須是強類型，同時添加any類型兼容JS的弱類型。同時帶來了嚴格的面向對象定義，每個ts文件須要定義成一個或多個類，同時向外面暴露接口。我把TypeScript比做Java版的JavaScript，不少對象的定義及使用跟Java像極了。這樣從語言上解決了JS的問題，編程過程當中我只需考慮對象之間的關係而不是JS文件、變量之間的關係，大大提升了前端生產力且提升了程序健壯性及可維護性。

目前三大主流前端框架（谷歌的Angular、Facebook的React.js以及Vue.js）都已經支持TypeScript語言，其中Angular更是如此。它自己就是用TypeScript寫出且規定TypeScript爲默認編程語言。Angular提供了不少功能強大的庫函數，經過引入模版便可快速使用。

TypeScript爲何全面兼容JavaScript及全部瀏覽器呢？由於它是「始於JavaScript，歸於JavaScript」。TypeScript有一個編譯器，全部TypeScript程序均可以編譯成不一樣規範標準的JavaScript程序，所以並不改變目前的JS生態。下面是一個用TS寫的一個類及編譯成JS的例子：

TS定義一個對象：

class BankAccount {
    balance = 0;
    deposit(credit: number) {
        this.balance += credit;
        return this.balance;
    }
}  

通過編譯器轉換成的JS代碼：

var BankAccount = (function () {
    function BankAccount() {
        this.balance = 0;
    }
    BankAccount.prototype.deposit = function(credit) {
        this.balance += credit;
        return this.balance;
    };
    return BankAccount;
})();