React中如何为scroll事件处理函数正确定义类型？

你这里的核心问题是混淆了React合成事件和原生DOM事件的类型：

1. 你是直接给原生DOM的document绑定scroll事件，不是在React组件上使用onScroll属性，所以不能用React.UIEvent（这是React合成事件的类型），而应该用原生DOM事件类型。
2. 代码里存在笔误：addEventListener的第一个参数写的是'submit'，应该改成'scroll'，否则绑定的是表单提交事件，和scrollHandler不匹配。

正确的类型定义写法 #

直接使用全局的Event或更精确的UIEvent类型（原生DOM的事件类型，非React命名空间下的）：

import { useEffect } from 'react';

useEffect(() => {
  document.addEventListener('scroll', scrollHandler);

  return () => document.removeEventListener('scroll', scrollHandler);
}, []); // 务必添加空依赖数组，避免重复绑定/解绑

const scrollHandler = (e: Event) => {
  console.log(e);
};

如果需要更精确的类型，也可以用UIEvent（scroll事件的事件对象属于UIEvent的实例）：

const scrollHandler = (e: UIEvent) => {
  console.log(e);
};

为什么React.UIEvent无效？ #

React.UIEvent<T>是React封装的合成事件类型，仅适用于React组件的事件回调（比如<div onScroll={(e: React.UIEvent<HTMLDivElement>) => {}} />）。当直接操作原生DOM元素绑定事件时，事件对象是浏览器原生的事件实例，所以要使用全局作用域下的DOM事件类型。

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