React+Typescript编写绑定div的自定义useHover hook报ts(1005)错求解

问题原因 #

你的报错来自于TypeScript泛型定义的语法错误：函数表达式的泛型参数不能直接声明在变量类型标注的位置（即冒号之后），且你错误地将具体类型HTMLDivElement当作了泛型参数名使用，不符合TS语法规范，因此触发'(' expected.ts(1005)错误。
另外你的代码还有两个隐含问题：

• 只监听了mouseover事件，没有监听mouseout事件，hover状态不会自动恢复
• 未指定返回数组的类型，TypeScript会默认将其推断为联合类型数组，解构使用时会出现类型不匹配问题

修复后的完整代码 #

import { useState, useRef, useEffect, RefObject } from 'react';

const Hooks = (props: any) => {
    const [hoverRef, hovered] = useHover<HTMLDivElement>();
    const style = {
        backgroundColor: hovered ? "red" : "",
    };

    return (
        <div ref={hoverRef} style={style}>
            <h1>Hooks!</h1>
        </div>
    );
};

// 修复泛型语法，支持任意继承自HTMLElement的元素类型
const useHover = <T extends HTMLElement>() => {
    const [value, setValue] = useState(false);
    const ref = useRef<T>(null);

    const handleMouseOver = () => setValue(true);
    // 补充鼠标移出事件处理
    const handleMouseOut = () => setValue(false);

    useEffect(() => {
        const node = ref.current;
        if (node) {
            node.addEventListener("mouseover", handleMouseOver);
            node.addEventListener("mouseout", handleMouseOut);

            return () => {
                node.removeEventListener("mouseover", handleMouseOver);
                node.removeEventListener("mouseout", handleMouseOut);
            }
        }
    }, []);

    // 添加as const将返回值标记为元组类型，避免类型推断错误
    return [ref, value] as const;
};

简化版本（固定仅支持div元素，无需泛型） #

const useHover = () => {
    const [value, setValue] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

    const handleMouseOver = () => setValue(true);
    const handleMouseOut = () => setValue(false);

    useEffect(() => {
        const node = ref.current;
        if (node) {
            node.addEventListener("mouseover", handleMouseOver);
            node.addEventListener("mouseout", handleMouseOut);
            return () => {
                node.removeEventListener("mouseover", handleMouseOver);
                node.removeEventListener("mouseout", handleMouseOut);
            }
        }
    }, []);

    return [ref, value] as const;
}

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