TypeScript中window.addEventListener报错：类型'(e: string) => void'无法分配给类型'EventListener'

这个错误的核心原因是你对事件处理函数的参数类型定义错了——浏览器的事件监听函数（包括自定义事件）接收的参数是**Event（或其子类）对象**，而不是直接的字符串。自定义事件传递的数据会放在事件对象的detail属性里，我们需要正确获取它。

修正方案一：使用CustomEvent类型并获取detail #

直接把处理函数的参数类型指定为CustomEvent<string>（假设你传递的是字符串类型数据），再通过e.detail拿到实际值：

const [locked, setLocked] = useState<string>("pending");

// 处理函数接收CustomEvent类型，获取detail中的字符串数据
const unlockHandler = (e: CustomEvent<string>) => { 
  setLocked(e.detail); 
};

useEffect(() => {
  // 类型断言让TS识别这个处理函数符合EventListener类型
  window.addEventListener("unlockProtocol", unlockHandler as EventListener);
  return () => window.removeEventListener("unlockProtocol", unlockHandler as EventListener);
}, []);

修正方案二：更严谨的类型处理（无断言） #

如果你不想用类型断言，可以先接收Event类型参数，再安全地判断并转换为CustomEvent<string>：

const [locked, setLocked] = useState<string>("pending");

const unlockHandler = (e: Event) => { 
  // 先确认事件是我们期望的CustomEvent类型
  if (e instanceof CustomEvent) {
    setLocked(e.detail as string);
  }
};

useEffect(() => {
  window.addEventListener("unlockProtocol", unlockHandler);
  return () => window.removeEventListener("unlockProtocol", unlockHandler);
}, []);

额外说明：触发自定义事件的正确方式 #

如果是你自己触发这个unlockProtocol事件，要确保使用CustomEvent来创建，这样detail属性才能正确传递数据：

// 示例：触发自定义事件，传递"unlocked"状态
window.dispatchEvent(new CustomEvent("unlockProtocol", { detail: "unlocked" }));

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