如何注解函数类型使其支持React.MouseEvent参数或无参调用？

问题原因 #

• 类型运算符优先级错误：你当前的handleClose: () => void | ((event: React.MouseEvent<HTMLElement>) => void)写法中，TypeScript会将其解析为「无参数、返回值为void | 带event参数的函数」的单函数类型，而非你预期的「两种函数类型的联合」，因此会出现赋值不匹配的错误。
• 类型提示无React.前缀属于正常现象：这是TypeScript的类型展示简化逻辑，只要你代码中已经正确导入React.MouseEvent类型，该提示不代表定义错误，无需额外处理。

解决方案 #

方案1：修正联合类型写法 #

将两个函数类型分别用括号包裹，明确联合类型的作用范围：

interface IProps {
  // 其他属性...
  handleClose: (() => void) | ((event: React.MouseEvent<HTMLElement>) => void)
}

方案2：使用可选参数简化写法 #

你的需求本质是允许handleClose接收或不接收event参数，用可选参数的写法更简洁易读，效果和上述联合类型完全一致：

interface IProps {
  // 其他属性...
  handleClose: (event?: React.MouseEvent<HTMLElement>) => void
}

验证 #

修改后，以下两种赋值方式都会通过类型检查：

// 无参数的关闭处理函数
const handleClose1 = () => {
  console.log('关闭对话框')
}
// 带event参数的关闭处理函数
const handleClose2 = (e: React.MouseEvent<HTMLElement>) => {
  e.stopPropagation()
  console.log('关闭对话框')
}

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