TypeScript中如何使用Tuple?Union聲明函數(shù)重載

這篇文章主要介紹“TypeScript中如何使用Tuple Union聲明函數(shù)重載”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“TypeScript中如何使用Tuple Union聲明函數(shù)重載”文章能幫助大家解決問(wèn)題。

問(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];

  // ...
}

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ù)重載”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。