TypeScript中怎么使用Tuple Union声明函数重载

这篇文章主要介绍“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 已经内置了 "Convert overload list to single signature" 的重构选项，可以一键将重载列表变为参数 tuple union。

不过到这里其实还存在问题，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声明函数重载”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！