Typescript 常見的幾種函數重載方法詳解與應用示例

所謂的重載，其實就是使用相同的函數名，傳入不同數量的參數或不同類型的參數，以此創建出多個方法或產生不同結果。

1. 最常見的，也就是根據定義傻瓜式地判斷參數類型與數量

function showPerson (name, ...others) {
    console.log(name, others)
}

showPerson('tate', {age: 25, test: 'test str'})

2. 其次就是使用常規的重載簽名

使用重載簽名進行重載，好處在於可以對傳入的參數進行限制，只有當簽名存在對應類型或數量的參數時，才不會報錯。

此處定義完重載簽名之后，一定要有具體實現

function showPerson (name: string): void;
function showPerson (age: number): void;
function showPerson (play: () => void): void;
function showPerson (...args) {
    console.log(args)
    // 根據函數類型和數量作出不同的行為
}

重載簽名配合可選參數可以使重載變得更加靈活

function showPerson (name:string, age?: number, play?: () => void): void;

// 利用重載簽名 對不同的缺省做相應的處理
function showPerson (name, age, play) {
    // dosomething
}
showPerson('tate', 25)

3.利用特定重載簽名做更加細致的重載處理

鄙人比較喜歡NBA，就拿NBA舉例。比如說現在需要寫一個函數，符合此函數規則的只有三個人： 姚明，科比和詹姆斯；只有當名字是姚明的時候，他才可以打中鋒， 是科比的時候才能打后衛，是詹姆斯的時候才能打前鋒，並且因為國內球員比較瘦弱，所以只有當姚明是25歲以上的時候，才能被歸為合格的中鋒（只是舉個例子，不要太當真），那這個時候就用到特定重載簽名了。

function playBasketball (name: 'YaoMing', age: number): void;
function playBasketball (name: 'Kobe', age?: number): void
function playBasketball (name: 'James', age?: number): void;

function playBasketball (name: string, age: number) {
    if (name === 'YaoMing' && age && age >= 25) {
        console.log('good Center')
    } else if (name === 'Kobe') {
        console.log('good guard')
    } else if (name === 'Jams') {
        console.log('good forward')
    } else {
        console.log('ordinary baskerball player')
    }
}

playBasketball('YaoMing', 25);
playBasketball('Kobe');　

4.  使用接口搭配重載簽名或非重載簽名

interface BasketballPlayer {
    (name: 'YaoMing', age: number): void;
    (name: 'Kobe', age: number): void;
    (name: 'James', age: number): void;
}
let playBasketball: BasketballPlayer = function (name) {
    if (name === 'YaoMing') {
        // dosomething
    }
}

使用接口配合函數的默認參數，可實現特定重載簽名的效果：

interface BasketballPlayer {
    (name: 'YaoMing', age: number): void;
    (name: 'Kobe', age: number): void;
    (name: 'James', age: number): void;
}
let playBasketball: BasketballPlayer = function (name = 'Yaoming', age: number) {
    if (age >= 25) {
        console.log('good center')
    }
}

let playBasketball2: BasketballPlayer = function (name = 'Kobe') {
    console.log('good guard')
}

let playBasketball3: BasketballPlayer = function (name = 'James') {
    console.log('good forward');
}　　

此處其並非嚴格意義上的重載，但是卻利用了重載的思想，並且靈活搭配了函數的默認參數。

 

TS在大型項目中帶來的優勢超乎我們的想象，其他各方面的分享將會持續進行，有興趣的小伙伴可持續關注。