@typescript-eslint/no-misused-promises移除异步事件处理器误报及禁用合理性问询

你这里的操作没有错误，属于TypeScript ESLint规则的误报。

规则核心逻辑 #

@typescript-eslint/no-misused-promises规则的设计初衷，是防止把返回Promise的函数当作同步回调传入（比如addEventListener时用async函数，浏览器会忽略返回的Promise，若函数内抛出错误会变成未捕获的Promise rejection）。但该规则的实现没区分addEventListener和removeEventListener的场景——removeEventListener只是传入函数引用用于匹配移除，并不会执行这个函数，所以函数是否返回Promise完全不影响这里的逻辑。

合理禁用理由 #

你可以用eslint-disable-next-line注释并附上清晰理由，示例如下：

// eslint-disable-next-line @typescript-eslint/no-misused-promises
// 移除事件监听器仅传入函数引用，不会执行该函数，无需关注返回值类型
button.removeEventListener("click", hideAndUnmountSnackbar);

额外优化建议 #

如果想从根源避免这类误报，可以给异步事件处理函数包一层同步wrapper，添加和移除监听器时都用这个引用：

const handleClick = () => {
  hideAndUnmountSnackbar().catch(err => console.error(err));
};

button.addEventListener("click", handleClick);
// 移除时不会触发规则报错
button.removeEventListener("click", handleClick);

这样既符合规则要求（添加监听器用同步函数），又能正确处理异步函数的错误，同时移除操作也不会再触发误报。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD