React中事件处理器的TypeScript类型：mousedown事件参数类型该如何定义？

正确的事件类型定义 #

你同时监听了mousedown和touchstart事件，对应的TypeScript类型分别是MouseEvent和TouchEvent，因此事件处理器的参数可以使用联合类型MouseEvent | TouchEvent，这样能精准匹配两个事件的类型要求。如果追求更通用的写法，也可以直接使用Event类型。

为什么ChangeEvent<HTMLLIElement>不适用 #

ChangeEvent是专门为表单元素的change事件设计的类型，和鼠标点击、触摸开始这类事件的类型完全不匹配，所以会出现“无函数重载匹配”的错误。

修改后的代码示例 #

const [dropdown, setDropdown] = useState<boolean>(false);
const ref = useRef<HTMLLIElement>();

useEffect(() => {
    const handler = (event: MouseEvent | TouchEvent) => {
        // 由于event.target的类型是EventTarget，需要断言为Node才能调用contains方法
        if (dropdown && ref.current && !ref.current.contains(event.target as Node)) {
            setDropdown(false);
        }
    };
    document.addEventListener('mousedown', handler);
    document.addEventListener('touchstart', handler);
    return () => {
        document.removeEventListener('mousedown', handler);
        document.removeEventListener('touchstart', handler);
    };
}, [dropdown]);

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