编辑：我设置了一个代码和框：https://codesandbox.io/s/magical-poitras-yogur?file=/src/App.tsx
我尝试做一个自定义的钩子到div元素，以响应添加事件侦听器。
我找到了这个“通用”解决方案：

function useMyCustomHook<T extends HTMLElement>{
    const myRef = useRef<T>(null)

    // do something with the ref, e.g. adding event listeners

    return {ref: myRef}
}

function MyComponent(){
    const {ref: myElementRef} = useMyCustomHook<HTMLDivElement>()

    return <div ref={myElementRef}>A Div</div>
}

从：Cannot assign RefObject to RefObject instance
我试着在下面的代码中实现它。我试了几个小时，最后只发现了一个错误，但我不知道如何解决它。错误在我的useHover函数表达式中的第一个=处。错误是：'(' expected.ts(1005)
我代码：

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

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

                                          
const useHover:<HTMLDivElement extends HTMLElement> = () => {
                                      // ERROR HERE ^ the first equal sign. '(' expected.ts(1005)
    const [value, setValue] = useState(false);
    const ref = useRef<HTMLDivElement>(null);

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

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

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

    return [ref, value];
};

任何帮助都是感激不尽的！