TypeScript中如何优化不同参数个数的函数？代码报错解析

问题场景 #

你尝试在TypeScript中处理两种不同参数个数的函数，用联合类型定义回调函数类型时出现调用错误，但改用宽泛的剩余参数类型后就正常了，具体代码如下：

报错的代码 #

const callbackFunction = (fn: ((oneArgument: number) => void) | (() => void)) => {
  if(fn.length === 1) {
    fn(1);
    return;
  }

  if(fn.length === 0) {
    fn(); // 🤷 报错：必须传入一个参数
    return;
  }
}

正常运行的代码 #

const callbackFunction = (fn: (...args: any[]) => void) => {
  if (fn.length === 1) {
    fn(1);
    return;
  }

  if (fn.length === 0) {
    fn(); // 无报错
    return;
  }
};

你想知道两者的差异，并且希望保留更具体的类型定义，而不是用any[]这种宽泛的类型。

原因解析 #

联合类型的调用限制 #

当你用((oneArgument: number) => void) | (() => void)这种联合类型时，TypeScript在调用fn时会要求同时满足所有联合分支的调用签名。也就是说，调用fn时必须传入一个number参数（因为第一个分支需要参数），哪怕你通过fn.length === 0判断出它是无参数的函数——TypeScript默认不会把fn.length这个运行时属性和函数的参数个数类型关联起来，无法自动窄化联合类型到具体的分支。

剩余参数类型的宽松性 #

而(...args: any[]) => void是一个接受任意参数的函数类型，不管你传0个还是1个参数，都符合这个类型的要求，所以调用时不会报错，但代价是丢失了类型检查的严谨性——比如传入不符合预期的参数时，TypeScript也不会提示错误。

解决方案：用自定义类型守卫实现类型窄化 #

要保留具体的类型定义，同时让TypeScript正确识别函数的参数个数类型，你可以自定义类型守卫函数，明确告诉TypeScript如何通过fn.length来窄化类型：

1. 先定义更清晰的类型别名：

// 无参数函数类型
type ZeroArgCallback = () => void;
// 单参数函数类型
type OneArgCallback = (num: number) => void;
// 联合类型
type Callback = ZeroArgCallback | OneArgCallback;

2. 编写自定义类型守卫：

// 判断是否为无参数函数
function isZeroArg(fn: Callback): fn is ZeroArgCallback {
  return fn.length === 0;
}

// 判断是否为单参数函数
function isOneArg(fn: Callback): fn is OneArgCallback {
  return fn.length === 1;
}

3. 修改回调处理函数：

const callbackFunction = (fn: Callback) => {
  if (isOneArg(fn)) {
    fn(1); // 正确识别为单参数函数，无报错
    return;
  }

  if (isZeroArg(fn)) {
    fn(); // 正确识别为无参数函数，无报错
    return;
  }
};

这样既保留了具体的类型定义，又能让TypeScript在调用时正确匹配函数的参数要求，不会出现错误提示。

内容的提问来源于stack exchange，提问作者wherehows