這篇文章主要介紹了TypeScript?使用?Tuple?Union?聲明函數(shù)重載，TypeScript 中為函數(shù)添加多個(gè)簽名后，依然需要添加相應(yīng)的代碼來(lái)判斷并從不同的簽名參數(shù)列表中獲取對(duì)應(yīng)的參數(shù)，下文就來(lái)探索方法和技巧吧

問(wèn)題：

TypeScript 中為函數(shù)添加多個(gè)簽名后，依然需要添加相應(yīng)的代碼來(lái)判斷并從不同的簽名參數(shù)列表中獲取對(duì)應(yīng)的參數(shù)。過(guò)去常見(jiàn)的寫(xiě)法：

function refEventEmitter(event?: string): void;
function refEventEmitter(event: string, callback: () => void): void;
function refEventEmitter(callback: () => void): void;
function refEventEmitter(
  eventOrCallback?: string | (() => void),
  callback?: () => void,
): void {
  let event: string | undefined;

  if (typeof eventOrCallback === 'function') {
    callback = eventOrCallback;
  } else {
    event = eventOrCallback;
  }

  // ...
}

這個(gè)過(guò)程因?yàn)閷⒃袇?shù)列表直接按序號(hào)拍平，參數(shù)之間的類(lèi)型關(guān)聯(lián)需要人肉確保正確。

技巧：

這時(shí)我們可以通過(guò)使用tuple union 的參數(shù)類(lèi)型，來(lái)無(wú)腦處理各種函數(shù)重載情況：

function refEventEmitter(event?: string): void;
function refEventEmitter(event: string, callback: () => void): void;
function refEventEmitter(callback: () => void): void;
function refEventEmitter(
  ...args:
    | [event?: string]
    | [
        event: string,
        callback: () => unknown,
      ]
    | [callback: () => unknown]
): void {
  let [event, callback] =
    args.length === 2
      ? args
      : typeof args[0] === 'function'
      ? [undefined, args[0]]
      : [args[0], undefined];

  // ...
}

實(shí)際上，此時(shí)上方的簽名列表也不再需要了：

function refEventEmitter(
  ...args:
    | [event?: string]
    | [
        event: string,
        callback: () => unknown,
      ]
    | [callback: () => unknown]
): void {
  let [event, callback] =
    args.length === 2
      ? args
      : typeof args[0] === 'function'
      ? [undefined, args[0]]
      : [args[0], undefined];

  // ...
}

這篇其實(shí)拖了有點(diǎn)久，在寫(xiě)的時(shí)候發(fā)現(xiàn) TypeScript 已經(jīng)內(nèi)置了 "Convert overload list to single signature" 的重構(gòu)選項(xiàng)，可以一鍵將重載列表變?yōu)閰?shù) tuple union。

不過(guò)到這里其實(shí)還存在問(wèn)題，TypeScript 中 typeof 條件判斷不能對(duì)整個(gè)對(duì)象進(jìn)行收窄，只能收窄被 typeof 到的某個(gè)元素、屬性。上面的例子中，如果需要的不只是 args[0] 就會(huì)出現(xiàn)問(wèn)題。

此時(shí)我們可以引入一個(gè)工具函數(shù) isTypeOfProperty(object, key, type)：

此時(shí)實(shí)現(xiàn)就變成了：

function refEventEmitter(
  ...args:
    | [event?: string]
    | [
        event: string,
        callback: () => unknown,
      ]
    | [callback: () => unknown]
): void {
  let [event, callback] =
    args.length === 2
      ? args
      : isTypeOfProperty(args, 0, 'function')
      ? [undefined, args[0]]
      : [args[0], undefined];

  // ...
}

到此這篇關(guān)于TypeScript 使用 Tuple Union 聲明函數(shù)重載的文章就介紹到這了,更多相關(guān)TypeScript 聲明函數(shù)重載內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: