如何让TypeScript自动推导泛型参数，为TypedEvent添加params属性

你当前的泛型定义顺序导致TypeScript无法自动推导A和O的类型，调整泛型参数的声明方式即可解决问题，以下是两种可行写法：

写法一：直接绑定TypedEvent泛型参数 #

将函数泛型参数直接对应TypedEvent的两个泛型参数，让TypeScript从传入的实例自动推导类型：

export const addParamsToEvent = <A extends Array<any> = any[], O = any>(
  { args, ...event }: TypedEvent<A, O>
): TypedEvent<A, O> & { params: O } => {
  const eventWithParams = {
    ...event,
    args,
    params: Object.fromEntries(
      Object.entries(args).filter(
        ([key]) => typeof key === "string" || isNaN(Number(key))
      )
    ) as O,
  };

  return eventWithParams;
};

写法二：用条件类型提取泛型参数 #

如果希望基于传入的T类型自动提取泛型，可以用infer关键字从T中推导O：

export const addParamsToEvent = <T extends TypedEvent<any, any>>(
  { args, ...event }: T
): T & { params: T extends TypedEvent<any, infer O> ? O : never } => {
  const eventWithParams = {
    ...event,
    args,
    params: Object.fromEntries(
      Object.entries(args).filter(
        ([key]) => typeof key === "string" || isNaN(Number(key))
      )
    ) as T extends TypedEvent<any, infer O> ? O : never,
  };

  return eventWithParams;
};

效果验证 #

传入具体的TypedEvent实例时，TypeScript会自动推导params的类型：

// 示例：定义具体的TypedEvent类型
type MyEvent = TypedEvent<[number, string], { name: string; age: number }>;
const event: MyEvent = {
  type: "test",
  bubbles: false,
  cancelable: false,
  composed: false,
  args: [123, "hello", { name: "Alice", age: 25 }] as [number, string] & { name: string; age: number },
};

const test = addParamsToEvent(event);
// test.params的类型会自动推导为{ name: string; age: number }

原写法问题说明 #

你之前的泛型声明顺序是<T extends TypedEvent<A, O>, A extends Array<any> = any, O extends any = any>，TypeScript无法从T反向推导A和O的具体类型——因为A和O是独立于T的泛型参数，没有明确的关联约束。调整后泛型参数直接与TypedEvent的类型绑定，TypeScript就能从传入参数自动完成推导。

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