React Tooltip 组件与 TypeScript 在我的 useRef 元素上出现“可能未定义”错误，不知道如何修复

Question

I have a simple functional React component for a re usable tooltip that I'm working on and I've got everything almost ready to test, but I'm getting a TypeScript error 'Possibly Undefined' on my useRef element node at this line in my function: if (node.current.contains(target))... and I don't know how to fix it.

I initially tried setting the type of useRef as:

const node = useRef()<HTMLDivElement>(null);

and then calling it in my function like:

    const handleHover = ({ target }) => {
        if (node?.current.contains(target)) {
        ....
        }
    }

But that throws an error "Cannot invoke an expression whose type lacks a call signature. Type 'MutableRefObject' has no compatible call signatures." at the definition level and then "Expected an expression" in my function.

I'm certain the answer is obvious and I have just been staring at this for too long but I'm stumped at the current moment so any feedback is hugely appreciated.

My current component for full reference:

import React, { useEffect, useRef, useState } from 'react';
import './tooltip-style.scss'
import cx from 'classnames';


type Props = {
    title: string;
    position: string;
    children: React.ReactNode;
};

const Tooltip = (props: Props) => {
    const { title, position, children } = props;

    const node = useRef();
    const [isVisible, setState] = useState(false);

    const handleHover = ({ target }) => {
        if (node.current.contains(target)) {
            // hover over
            return;
        }
        // hover out
        setState(false);
    };

    useEffect(() => {
        document.addEventListener('mouseover', handleHover);

        return () => {
            document.removeEventListener('mouseout', handleHover);
        };
    }, []);

    return (
        <div className={'.container'}
            data-testid="tooltip"
            ref={node}
            onMouseEnter={() => setState(!isVisible)}
        >
            <div data-testid="tooltip-placeholder">{children}</div>
            {isVisible && (
                <div
                    className={cx('.tooltipContent', [position])}
                    data-testid="tooltip-content"
                >
                    <span className={'.arrow'}></span>
                    {title}
                </div>
            )}
        </div>
    );
};


export default Tooltip;

Answer 1

You can solve this by typing the ref as follows (using your example):

const node = useRef() as MutableRefObject<HTMLDivElement>;

Just be sure you have the necessary imports as well:

import React, { useRef, MutableRefObject } from 'react';

Answer 2

You are almost there but there are two syntactical errors.

const node = useRef()<HTMLDivElement>(null);

useRef() calls the function and then you call the result of that function with (null) . You need to remove those first parentheses and just call the hook once:

const node = useRef<HTMLDivElement>(null);

---

if (node?.current.contains(target)) {

The variable node is always defined. It is the current property which might be null . So move the optional chaining question mark to after current :

if (node.current?.contains(target)) {

---

If you want to add a type to the arguments of handleHover there's a minor issue because the target property of a MouseEvent is either EventTarget or null . But .contains() expects a Node . I'm not sure if you would treat invalid arguments as "hover over" or "hover out". It's unlikely to occur in reality but to be type-safe we should check it.

const node = useRef<HTMLDivElement>(null);
const [isVisible, setState] = useState(false);

const handleHover = ({ target }: MouseEvent) => {
  if (target instanceof Node && node.current?.contains(target)) {
    // hover over
    return;
  }
  // hover out
  setState(false);
};

Typescript Playground Link