TypeScript中如何使用Tuple?Union聲明函數重載

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

問題：

TypeScript 中為函數添加多個簽名后，依然需要添加相應的代碼來判斷并從不同的簽名參數列表中獲取對應的參數。過去常見的寫法：

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;
  }

  // ...
}

這個過程因為將原有參數列表直接按序號拍平，參數之間的類型關聯需要人肉確保正確。

技巧：

這時我們可以通過使用tuple union 的參數類型，來無腦處理各種函數重載情況：

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

  // ...
}

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

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 條件判斷不能對整個對象進行收窄，只能收窄被 typeof 到的某個元素、屬性。上面的例子中，如果需要的不只是 args[0] 就會出現問題。

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

此時實現就變成了：

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

  // ...
}

關于“TypeScript中如何使用Tuple Union聲明函數重載”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。