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类型，所以在开头额外进行了一次函数类型定义，在函数执行时，根传入的参数类型不同，进行不同的计算。

注意点：

为了让编辑器能够选择正确的检查类型， 他会从重载列表的第一个开始匹配， 因此，在定义重载时， 一定要把最精确的定义放在最前面。重载签名必须均导出或均不导出！