常见的一些react事件类型标注

react事件类型定义

react对ts支持比较友好 但是不熟悉ts的同学就可能是any ts了，本人6个月前端 熟悉vue2 vue3 唯独react不怎么熟，最近公司有一个web3的项目 需要用react，没办法只有硬着头皮上，但是每个人都想用最新的技术 所以我选择了 vite5+react18+ts,连夜恶补react 熟悉官网文档

但是还是在ts方面不熟练，又不想用any 就查阅了一些文档 以及看了些别人的文档，总结了一下react中ts使用技巧

其实ts基础还是很好上手的 但是react的一些事件 或html元素的类型其实很多人还是不知道的

1.react中的事件类型

如果不标注事件类型的话 就会爆红 ，react其实内置了这些事件的类型接口

这就够了吗 为了更准确的让ts知道是我们点击了哪个元素的事件对象 我们还可以把元素的类型传给我们的react泛型接口

2.常见的react中的事件类型

事件类型	描述
AnimationEvent	CSS动画。
ChangeEvent	改变<input>、<select>和<textarea>元素的值。
ClipboardEvent	使用复制、粘贴和剪切事件。
CompositionEvent	由于用户间接输入文本而发生的事件（例如，根据浏览器和PC设置，如果您想在美国键盘上输入日文，可能会出现一个带有附加字符的弹出窗口）。
DragEvent	使用指针设备（例如，鼠标）进行拖放交互。
FocusEvent	元素获得或失去焦点时发生的事件。
FormEvent	每当表单或表单元素获得/失去焦点、表单元素值更改或表单提交时发生的事件。
InvalidEvent	当输入的有效性限制失败时触发（例如<input type="number" max="10">，有人插入数字20）。
KeyboardEvent	用户与键盘的交互。每个事件描述单个键的交互。
MouseEvent	由于用户与指针设备（例如，鼠标）的交互而发生的事件。
PointerEvent	由于用户与多种指针设备（如鼠标、笔/触控笔、触摸屏）的交互而发生的事件，它还支持多点触控。除非您为较旧的浏览器（IE10或Safari 12）开发，否则建议使用指针事件。扩展UIEvent。
TouchEvent	由于用户与触摸设备的交互而发生的事件。扩展UIEvent。
TransitionEvent	CSS过渡。浏览器支持不完全。扩展UIEvent。
UIEvent	鼠标、触摸和指针事件的基本事件。
WheelEvent	在鼠标滚轮或类似输入设备上滚动。（注意：wheel事件不应与scroll事件混淆）
SyntheticEvent	所有上述事件的基本事件。在不确定事件类型时应使用。

3.常见的HTML元素接口

HTMLInputElement	代表 <input> 元素，包含特定的属性，如 value、checked、type 等。
HTMLSelectElement	代表 <select> 元素，包含 options、length、selectedIndex 等属性。
HTMLAnchorElement	代表 <a>（锚）元素，包括 href、target、download 等属性。
HTMLTextAreaElement	代表 <textarea> 元素，提供 rows、cols、value 等属性。
HTMLDivElement	代表 <textarea> 元素，提供 rows、cols、value 等属性。
HTMLImageElement	代表 <img> 元素，包含 src、alt、width、height 等属性。

4.更方便的查看事件类型方法

以上都是根据我查阅文档 和看了其他人文章知道的 后来我发现有一个更简单的方法就是

把鼠标放到e上面 提示了该事件对象类型 直接复制到我们函数的参数e那