[Day2] 太陽與月亮 Typescript與Javascript

第 11 屆 iThome 鐵人賽

DAY 2

Software Development

用設計模式與Typescript，在React異世界築起堅固保壘！系列第 2 篇

11th鐵人賽 design pattern typescript react

Yuri Tsai

2019-09-17 12:53:45

1269 瀏覽

分享至

嗨大家好我是一路爬坡的阿肥

今天吃月餅消化的熱量，應該可以讓大腦擠出10天份的文章
不過實際上應該會變成肚子的一部份吧(哭)

先談Javascript

Javascript是由前網景(Netscape)工程師Brendan Eich所發明的語言，雖然只有短短的10天開發時間，卻讓原本只是個靜態的瀏覽器世界有了重大的蛻變。到現在我們能開發出各種使用者互動的網頁應用程式，甚至是後端服務、行動應用等等，都要感謝有Javascript的誕生。

Javascript好上手的程度就跟他熱門的程度一樣，只要google一下，看完搜尋結果的第一頻連結，恭喜你，你已經會寫Javascript了！

但是，我想會來看這系列文章的你，應該有了什麼痛的領悟，才會下定決心看這篇的吧！

Javascript跟其他語言相比，雖然學習門檻低，但是卻有不少地方需要好好掌握。不然當你很開心地開發下去，最後會收到滿天飛的bug。

舉一些例子來說：

var/let/const scope/hoisting - 變數的作用範圍與提升
function closure/curry - 函式的閉包與柯里化
this - 函式指向的作用物件
==/=== - 兩個等於跟三個等於的差異
...（族繁不及備載）

以上這些就提供給大家自行google，這裡要關注的是：型別。

有了型別，一切都不一樣了

資料型別，你可能會說：「Ｊavascript也有呀，而且宣告的時候，我說他是字串就是字串，是數字就是數字，真方便！」

但是只要開發過大型應用程式的人都知道，當你宣告一個複雜的物件或函式，並且在其他地方使用到的話，你可能需要有個嚴謹的規範、清楚的註釋才能減少錯誤的機會。例如：

// obj.js
export var complicatedObj = {
    prop1: "...",
    prop2: 123,
    prop3: true
    prop4: [{
        prop1ofProp4: "..."
        prop2OfProp4: 0
    }, ...]
};

//func.js
import {complicatedObj} from 'obj';
function doSomething(obj) {
    console.log(`print string:${complicatedObj.prop1}`);
    let a = complicatedObj.prop2+1;
    if(complicatedObj.prop3) {
        let b = prop4.map(item => {
            // 不知道item是什麼，執行以下這行就會報錯
            return item + a;
        });
    }
}
doSomething(complicatedObj);

但如果我們能為complicatedObj加個型別：

// obj.ts
export interface I_Props4_Item {
    prop1ofProp4:string;
    prop2ofProp4:number;
}
export interface I_ComplicatedObj {
    prop1:string;
    prop2:number;
    prop3:boolean;
    prop4:I_Props4_Item[];
}
export var complicatedObj:I_ComplicatedObj = {
    //當在宣告時就能即時知道屬性的型別
    ...
};

//func.ts
import {complicatedObj,I_ComplicatedObj} from 'obj';
function doSomething(obj:I_ComplicatedObj) {
    ...
    if(complicatedObj.prop3) {
        let b:number[] = prop4.map(item => {
            // 可以知道item的物件型別，即能正常執行
            return item.prop2OfPro4 + a;
        });
    }
}
doSomething(complicatedObj);

因此，微軟釋出的Typescript逐漸在Web前端開發中展露頭角，不僅解救了為弱型別而苦的工程師們，也讓開發高複雜度和大規模應用程式的過程可以更有規範、更能減少除錯機率。成熟的開發環境與社群，也讓他熱門的程度遠高於其他相似的語言。

TS vs Flow npm downloads over the last 2 years (npmtrends.com)