轉載

TypeScript基礎入門 – 函式 – 過載

專案實踐倉庫

https://github.com/durban89/typescript_demo.git
tag: 1.2.5

為了保證後面的學習演示需要安裝下ts-node，這樣後面的每個操作都能直接執行看到輸出的結果。

npm install -D ts-node

後面自己在練習的時候可以這樣使用

npx ts-node 指令碼路徑

函式

過載

JavaScript本身是個動態語言。 JavaScript裡函式根據傳入不同的引數而返回不同型別的資料是很常見的。如下例項

let suits = ["hearts", "spades", "clubs", "diamonds"];


function pickCard(x: any): any {
    if (typeof x == "object") {
        let pickCard = Math.floor(Math.random() * x.length);
        return pickCard;
    } else if (typeof x == `number`) {
        let pickedSuit = Math.floor(x / 13);
        return {
            suit: suits[pickedSuit],
            card: x % 13,
        }
    }
}

let myDeck = [
    {
        suit: "diamands",
        card: 2,
    },
    {
        suit: `spades`,
        card: 10,
    },
    {
        suit: `hearts`,
        card: 4
    }
]

let pickedCard1 = myDeck[pickCard(myDeck)];
let pickedCard2 = pickCard(15);

console.log(`card: ` + pickedCard1.card + ` of ` + pickedCard1.suit);
console.log(`card: ` + pickedCard2.card + ` of ` + pickedCard2.suit);

執行後得到型別如下結果

$ npx ts-node src/function_7.ts
card: 2 of diamands
card: 2 of spades

pickCard方法根據傳入引數的不同會返回兩種不同的型別。 如果傳入的是代表紙牌的物件，函式作用是從中抓一張牌。 如果使用者想抓牌，我們告訴他抓到了什麼牌。 但是這怎麼在型別系統裡表示呢。方法是為同一個函式提供多個函式型別定義來進行函式過載。 編譯器會根據這個列表去處理函式的呼叫。 下面我們來過載 pickCard函式。

let suits = ["hearts", "spades", "clubs", "diamonds"];

function pickCard(x: {suit: string, card: number}[]): number;
function pickCard(x: number): {suit: string, card: number};
function pickCard(x: any): any {
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    } else if (typeof x == `number`) {
        let pickedSuit = Math.floor(x / 13);
        return {
            suit: suits[pickedSuit],
            card: x % 13,
        }
    }
}

let myDeck = [
    {
        suit: "diamands",
        card: 2,
    },
    {
        suit: `spades`,
        card: 10,
    },
    {
        suit: `hearts`,
        card: 4
    }
]

let pickedCard1 = myDeck[pickCard(myDeck)];
let pickedCard2 = pickCard(15);

console.log(`card: ` + pickedCard1.card + ` of ` + pickedCard1.suit);
console.log(`card: ` + pickedCard2.card + ` of ` + pickedCard2.suit);

得到的結果類似如下

$ npx ts-node src/function_7.ts
card: 10 of spades
card: 2 of spades

這樣改變後，過載的pickCard函式在呼叫的時候會進行正確的型別檢查。

為了讓編譯器能夠選擇正確的檢查型別，它與JavaScript裡的處理流程相似。 它查詢過載列表，嘗試使用第一個過載定義。 如果匹配的話就使用這個。 因此，在定義過載的時候，一定要把最精確的定義放在最前面。

注意，function pickCard(x: any): any並不是過載列表的一部分，因此這裡只有兩個過載：一個是接收物件另一個接收數字。 以其它引數呼叫 pickCard會產生錯誤。

本例項結束實踐專案地址

https://github.com/durban89/typescript_demo.git
tag: 1.2.6