Typescript 如何为函数类型添加额外参数且保留原参数名？

核心问题原因 #

你之前用到的基于Cons/Push的元组操作是TypeScript 4.0版本发布前的旧实现方案，这类hack方法在处理元组时会丢失元组自带的参数标签（也就是你看到的参数名被替换为head/tail的问题）。

最简实现方案 #

TypeScript 4.0及以上版本支持带标签的元组展开语法，直接使用该特性即可完美保留原有函数的参数名，代码如下：

// 泛型说明：
// F: 原函数类型
// ExtraArg: 要追加的额外参数类型
// ReturnType: 新函数的返回值类型，默认继承原函数的返回值
type AppendArgumentToFunction<
  F extends (...args: any[]) => any,
  ExtraArg,
  ReturnType = ReturnType<F>
> = (...args: [...Parameters<F>, conf: ExtraArg]) => ReturnType;

使用示例 #

// 原函数类型
type Func1 = (id: string) => void;
// 转换后的函数类型
type Func2 = AppendArgumentToFunction<Func1, { extraArg: boolean }>;
// 最终Func2的类型为：(id: string, conf: { extraArg: boolean }) => void

如果需要自定义额外参数的名称，只需要修改元组中conf的标签名即可。

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