TypeScript解构事件参数时仅当id为指定值才通过类型检查

核心思路是给点击事件处理函数的参数做精确的字面量类型约束，将事件target的id类型从通用的string收窄为字面量'whatever'，TypeScript会在绑定事件时自动校验元素id和类型是否匹配，不匹配就会抛出类型错误。

首先修正你代码里的两处笔误：一是解构语法({ target: { id })缺少闭合花括号，二是JSX里的button标签未闭合，之后给事件参数定义精确类型即可：

// 定义专属点击事件类型：target是id固定为'whatever'的按钮元素
type WhateverButtonClick = Omit<React.MouseEvent<HTMLButtonElement>, 'target'> & {
  target: HTMLButtonElement & { id: 'whatever' }
}

const handleClick = ({ target: { id } }: WhateverButtonClick) => {
  // 此处id会被自动推导为字面量类型'whatever'，无需额外运行时判断
  console.log('hello world')
}

return (
  <div>
    <button
      id="whatever"
      onClick={handleClick}
    >
      合法按钮
    </button>
    <button
      id="somethingElse"
      onClick={handleClick} {/* TS此处会直接报类型不匹配错误，符合需求 */}
    >
      非法按钮
    </button>
  </div>
)

实现说明 #

• 默认情况下，React给button元素的onClick推导的事件类型中，target是通用EventTarget类型，且id是宽泛的string类型，无法做字面量校验
• 我们通过Omit工具类型去掉默认事件里的target属性，重新定义target为按钮元素且id固定为'whatever'的交叉类型，就实现了强约束
• 绑定事件时，TypeScript会自动对比按钮的id字面量类型和处理函数要求的id类型，id不匹配时直接触发类型报错

补充：如果你需要校验的是绑定事件的元素本身（而非事件冒泡触发的子元素）的id，可以把类型里的target换成currentTarget，逻辑完全一致，在大部分按钮点击场景下currentTarget的指向更稳定。

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