TypeScript为何拒绝复选框输入语法？React复选框功能正常却触发类型错误警告

我之前也踩过这个坑，其实核心是TypeScript对事件对象的类型约束很严格，咱们慢慢理清楚：

为什么会触发这个警告？ #

在React的MouseEvent里，event.target的类型是EventTarget——这是因为DOM事件的target指向实际触发事件的元素，TypeScript没办法百分百确定这个元素就是你的<input type="checkbox">（比如如果input内部嵌套了图标或文字，点击这些子元素时target就会变成子元素）。而EventTarget本身并没有checked属性，所以类型检查就会报错。

你说MDN里明确HTMLInputElement有checked属性完全没错，但TypeScript需要你明确告诉它：这个触发事件的元素就是复选框。

三种可行的解决方法 #

方法1：用currentTarget代替target #

event.currentTarget指向的是绑定事件处理函数的元素，也就是你写的<input>本身，TypeScript会自动推断它的类型是HTMLInputElement，直接访问checked毫无问题：

<input 
  type="checkbox" 
  onClick={(event: React.MouseEvent<HTMLInputElement>) => { 
    setIsTOSAccepted(event.currentTarget.checked); 
  }} 
  defaultChecked={isTOSAccepted} 
/>

方法2：给target做类型断言 #

如果你一定要用target，可以通过类型断言明确告诉TypeScript这个元素就是复选框：

<input 
  type="checkbox" 
  onClick={(event: React.MouseEvent<HTMLInputElement>) => { 
    setIsTOSAccepted((event.target as HTMLInputElement).checked); 
  }} 
  defaultChecked={isTOSAccepted} 
/>

方法3：改用onChange事件（更推荐） #

对于复选框这类表单元素，React官方更推荐用onChange监听状态变化，它对应的ChangeEvent类型会自动把target推断为HTMLInputElement，不需要额外处理，还更符合表单语义：

<input 
  type="checkbox" 
  onChange={(event: React.ChangeEvent<HTMLInputElement>) => { 
    setIsTOSAccepted(event.target.checked); 
  }} 
  defaultChecked={isTOSAccepted} 
/>

这个方案是我平时最常用的，既解决了类型问题，代码也更规范。

内容的提问来源于stack exchange，提问作者János