TypeScript中如何为addEventListener通用助手正确类型化以推断ev？

问题根源 #

原代码中subscribeEvent的泛型设计过于宽泛，AddArgs和RemoveArgs仅被定义为任意数组类型，未与目标元素（如window）的addEventListener方法参数类型建立关联，导致TypeScript无法自动推断回调函数的事件参数类型，也无法提供事件名称的自动补全。

修复方案 #

直接复用目标元素自身的addEventListener参数类型定义，让TypeScript基于目标类型自动推导所有参数的类型：

type Unsubscribe = () => void;

// 提取目标类型的addEventListener参数列表
type AddEventListenerParams<T> = T extends { addEventListener: (...args: infer P) => void } ? P : never;

function subscribeEvent<T extends {
  addEventListener: (...args: any[]) => void;
  removeEventListener: (...args: any[]) => void;
}>(
  target: T,
  ...[type, listener, options]: AddEventListenerParams<T>
): Unsubscribe {
  target.addEventListener(type, listener, options);
  return () => {
    target.removeEventListener(type, listener, options);
  };
}

// 正常工作：ev自动推断为StorageEvent，事件名称有自动补全
subscribeEvent(window, 'storage', ev => console.log(ev.storageArea));

方案说明 #

1. 用AddEventListenerParams<T>工具类型提取目标T的addEventListener方法的完整参数列表，确保订阅参数与目标原生方法完全匹配。
2. 函数参数使用数组解构...[type, listener, options]直接复用提取到的参数类型，让TypeScript自动推导每个参数的具体类型，包括回调函数的事件参数。
3. 保证removeEventListener的参数与addEventListener完全一致，避免解绑失败的潜在问题。

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