Typescript React+styled-components传函数作为props报重载匹配错误

问题原因 #

1. 事件类型不匹配：你定义的close回调类型是无具体元素绑定的通用MouseEventHandler，但实际传入的是HTMLDivElement元素触发的点击事件对象，类型不一致触发重载匹配失败。
2. 类型检查规则升级：如果昨日未报错今日突然出现，且新增其他组件的onClick也触发错误，通常是@types/react或@types/styled-components的类型包版本更新，新版本对事件类型的校验规则更严格，之前可通过的宽松类型写法现在会抛出错误。

修复方案 #

第一步：统一事件类型 #

修改组件的ImageFullscreen接口，将close的类型指定为和点击事件匹配的MouseEventHandler<HTMLDivElement>：

interface ImageFullscreen {
  path?: string
  shown: boolean
  close: MouseEventHandler<HTMLDivElement>
}

第二步（可选优化）：替换不合理的类型断言 #

原来的联合类型断言HTMLDivElement & HTMLImageElement不符合实际运行逻辑（一个元素不可能同时是div和img），可以用instanceof做运行时类型判断，代码更健壮也不会触发类型报错：

const handleMapViewClose: MouseEventHandler<HTMLDivElement> = e => {
  // 点击的不是图片元素时触发关闭
  if (!(e.target instanceof HTMLImageElement)) {
    close(e)
  }
}

全局报错补充处理 #

如果其他页面新增onClick也触发同类错误，可检查项目中所有未指定具体元素类型的MouseEventHandler、ClickEventHandler等事件类型定义，补充对应的元素泛型参数即可。

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