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在大型項目中帶來的優點超乎咱們的想象，其餘各方面的分享將會持續進行，有興趣的小夥伴可持續關注。