typescript

Typescript協助javascrip開發

劉仁竹 2019/12/25 10:13:44

0 1826

Typescript基於Javascript底層，所架構出來的語言，從開始支援ES6/ES2015至現今，就個人從學習C#、javascript，再來學習typescript經驗中，最大感受不一樣地方，有下列幾點：

1.可以在編輯階段就能夠檢查一些文字打錯的問題。

編輯畫面提示錯誤訊息

編譯過程也會顯示錯誤訊息

2. 方法及屬性強型別，在檢視許多程式碼中，快速發現參數的屬性，而javascript輸入類型只能是any，只能單靠註解以及追蹤方法得知。

ts檔案中，在方法中可以得知丟入參數之物件屬性

js檔案中，只會提示any的型別

3. interface，加強物件概念

簡單建立一個卡的介面及物件

interface ICard{
    id:string;
    name:string;

    deposit(money:number):void;

    showMoney():number;
}

class Card implements ICard
{
    id:string;
    
    name:string;

    company:string;

    amount:number = 0;

    public deposit(money:number){
        this.amount += money;
    }

    public showMoney():number{
        return this.amount;
    }
}

分別建立兩個不同輸入參數類別的方法，可以觀察到，如果輸入參數為ICard則不會有company這個屬性

從編譯出的js檔案中，可以發現，不會有interface這個介面，interface只會存在ts檔案中

class Card {
    constructor() {
        this.amount = 0;
    }
    deposit(money) {
        this.amount += money;
    }
    showMoney() {
        return this.amount;
    }
}

function readActionIf(_card) {

    console.log('name:' + _card.name);
    console.log('Money:' + _card.showMoney());
}
function readActionCl(_card) {
    console.log('company:' + _card.company);
    console.log('name:' + _card.name);
    console.log('Money:' + _card.showMoney());
}

4. enum，類別

ts檔案中建立enum的程式如下：

enum funType{
  A,
  B,
  C
}

function fun(){
  console.log(funType.A);
  console.log(funType.B);
  console.log(funType.C);
}
fun();

執行輸出值，enum則預設從0遞增

編譯出的js檔案中發現，不會有enum這個物件，取而代之的是利用變數物件建置

var funType;
(function (funType) {
    funType[funType["A"] = 0] = "A";
    funType[funType["B"] = 1] = "B";
    funType[funType["C"] = 2] = "C";
})(funType || (funType = {}));
function fun() {
    console.log(funType.A);
    console.log(funType.B);
    console.log(funType.C);
}
fun();

測試開發環境：VS code 1.41.1、Node.js 12.4.0、tsc version 3.7.3

Typescript除了可以配合jquery外，更是為angular開發基礎架構所用，然而還可以協助其他熱門前端框架所建置，例如：vue、react。Typescript開發也支援針對不同系統環境編譯產生檔案(例如：ES5)，從typescript所編譯出來的程式碼，可以看出不一樣的系統環境，所能用的物件不一樣，之後遇到需要維護舊系統時，可以試著產出對應js程式碼來參考。

結論

javascript為動態語言，開發環境相對簡單，但對於開發者不太友善，Typescript就像是套了一個友善規範，讓其就像.net開發模式一樣，有明確的intellisense，有物件導向概念，會建議學習Typescript之前，先經過Javascript的開發練習，就可以知道Typescript帶來的好處。