TS 函数重载

今天我们项目老大给我们分享了这样一个问题，记录一下。在实现某个功能的时候，要写一个时间转换的函数， 大概就是传递一个Moment对象进去， 然后给我返回一个格式化成YYYY-MM-DD HH：mm：ss的字符串，如果参数是undefined，就不做处理，返回undefined；然后实现了一下：

function handleDateFormat(date?: moment.Moment): string | undefined {
  if (!date) {
    return ;
  }
  return date.format('YYYY-MM-DD HH:mm:ss');
};
  
const str = handleDateFormat(moment());

仔细发现有这样一个问题，这个函数的返回类型无论在什么时候都是 string ｜ undefined类型。

但是实际上它在参数为Moment的时候返回值一定是string，在参数是undefined的时候一定是undefined。出现这个问题的原因很简单，编译器并不知道入参是什么类型的，返回值类型也不能确定。那这个函数的签名该怎么写?

这时可以为同一个函数提供多个函数类型定义来进行函数重载 可以完美的解决这个问题！

  function handleDateFormat<T extends moment.Moment | undefined>(
    date: T
  ): T extends moment.Moment ? string : undefined;
  function handleDateFormat(date?: moment.Moment): string | undefined {
    if (!date) {
      return ;
    }
    return date.format('YYYY-MM-DD HH:mm:ss');
  }

TypeScript函数重载是指为同一个函数提供多个函数类型，它的意义在于让你清晰的知道传入不同的参数得到不同的结果。如果不是这种情况，那就不需要使用函数重载。

因为这个函数在传入Moment类型的时候返回字符串类型，传入undefined类型的时候返回undefined类型，所以在开头额外进行了一次函数类型定义。在函数执行时，根据传入的参数类型不同，进行不同的计算。

注意点

• 为了让编译器能够选择正确的检查类型，它会从重载列表的第一个开始匹配。因此，在定义重载时，一定要把最精确的定义放在最前面。

• 重载签名必须均导出或均不导出。