typescript

Typescript協助javascrip開發

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

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帶來的好處。

 

參考文章

深入理解 TypeScript

TypeScript tutorial in Visual Studio Code

[Typescript]Typescript學習2 - 形態的介紹

Why Developers Love to Use TypeScript in 2019

 

 

 

劉仁竹