如何为React输入元素的onBeforeInputCapture定义TypeScript类型？

问题核心在于你使用了错误的事件类型：FormEvent是通用的表单事件类型，其类型定义中并不包含data属性，而onBeforeInputCapture对应的实际事件是BeforeInputEvent（属于InputEvent的子类），所以TypeScript会提示属性不存在。

解决方案 #

将事件参数的类型替换为React.BeforeInputEvent<HTMLInputElement>，这是React为onBeforeInput/onBeforeInputCapture事件提供的专属合成事件类型，内置了data属性的定义：

import "./styles.css";
import { BeforeInputEvent } from 'react'

export default function App() {
  const beforeInputCaptureHandler = (event: BeforeInputEvent<HTMLInputElement>) => {
    console.log(event.data) // 此时TypeScript不会再报错
  }

  return (
    <div className="App">
      <input onBeforeInputCapture={beforeInputCaptureHandler} />
    </div>
  );
}

额外说明 #

如果你直接使用DOM原生的InputEvent类型也可以正常工作，但React的BeforeInputEvent是经过封装的合成事件类型，更适配React的事件冒泡/捕获机制，推荐优先使用。

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