React 18.2+TypeScript中无法获取event.target的ID，如何解决？

问题根源在于TypeScript对event.target的类型约束：event.target的类型是EventTarget，这个类型本身并没有id属性，哪怕实际运行时它是DOM元素，TypeScript也需要明确类型才能允许访问id。另外，修改事件泛型（比如改成React.MouseEvent<HTMLDivElement>）没用，因为这个泛型指的是绑定事件的父元素类型，而event.target是实际被点击的子元素，两者类型不挂钩。

下面是几种可行的解决方法：

• 类型断言（简单直接）
  把event.target断言为HTMLElement（所有HTML元素都继承这个类型，自带id属性）：

  export default function App() {
    const clikHandler = (event: React.MouseEvent<HTMLElement>) => {
      const target = event.target as HTMLElement;
      console.log(target.id);
    };
  
    return (
      <div className="App">
        <div id="parent" onClick={clikHandler}>
          <div id="child"></div>
        </div>
      </div>
    );
  }
  

  如果确定被点击的一定是div元素，也可以断言为HTMLDivElement：

  const target = event.target as HTMLDivElement;
  

• 类型守卫（更安全）
  用类型守卫判断event.target是否为HTMLElement，避免非DOM元素的情况：

  const clikHandler = (event: React.MouseEvent<HTMLElement>) => {
    if (event.target instanceof HTMLElement) {
      console.log(event.target.id);
    }
  };
  

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