TypeScript中如何为类似rest运算符的对象合并函数添加类型注解

你要的可变长度泛型参数效果可以通过TS的可变元组泛型实现，搭配递归工具类型即可完美匹配对象展开的类型推导行为，实现方案如下：

第一步：定义递归合并类型 #

先写一个工具类型，把传入的对象元组按顺序交叉（后面的类型优先级更高，匹配你代码里后传入对象覆盖前面对象同名字段的逻辑）：

type MergeTuple<T extends unknown[]> = 
  T extends [infer First, ...infer Rest]
    // 按顺序交叉，后面的类型同名字段会覆盖前面的类型
    ? First & MergeTuple<Rest>
    // 空元组返回空对象
    : {};

第二步：给merge函数加类型注解 #

用泛型元组接收任意数量的入参对象，返回值用上面的工具类计算：

function merge<T extends object[]>(...objs: [...T]): MergeTuple<T> {
  return objs.reduce((res, cur) => {
    for (const key in cur) {
      res[key] = cur[key]
    }
    return res;
  // 给初始值做类型断言
  }, {} as MergeTuple<T>);
}

效果验证 #

和你用对象展开得到的类型完全一致：

// 测试用例1：无同名字段
const obj = merge(
  { name: { ownName: 'Lewis' } },
  { link: 'google.com' }
);
// typeof obj 等价于 { name: { ownName: string } } & { link: string }

// 测试用例2：有同名字段，后传入的覆盖前面的
const obj2 = merge(
  { count: 100 },
  { count: '200' }
);
// typeof obj2.count 为 string，和对象展开行为完全匹配

注：该实现要求TypeScript版本≥4.0，目前绝大多数前端项目都满足该版本要求。

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