类型“从不”上不存在属性“单击”。 TS2339

Question

According to other similar issues about this type of error with TypeScript (on questions #44147937 and #40796374 ) I've found that assigning null to create a state or reference will cause this problem: Property ... does not exist on type 'never'

how to handle this issue in this example component?

const FooComponent: FunctionComponent<FooInterface> = () => {

    const myRef = useRef(null)

    const handleClickOnButton = () => myRef?.current?.click();

    return (
       <div>
           <div ref={myRef} />
           <button onClick={handleClickOnButton} />
       </div>
}

Answer 1

TypeScript can't infer the type of the ref from where you use it later in the code, you have to tell it the type of the ref:

const ref = useRef<HTMLDivElement>(null);
// −−−−−−−−−−−−−−−^^^^^^^^^^^^^^^^

( useRef adds the null type to the type parameter you give it, soyou don't have to use <HTMLDivElement | null> .)

Answer 2

I've found a way to solve this problem.

giving <HTMLAnchorElement> to useRef will fix this issue:

  const linkRef = useRef<HTMLAnchorElement>(null);

Important : I have to use null to create this type of ref to passing into an element so can't change it.

Important : assigning <HTLMDivElement> or <HTMLElement> will cause another error:

TS2322: Type 'RefObject' is not assignable to type 'Ref | undefined'. Type 'RefObject' is not assignable to type 'RefObject'. Type 'HTMLElement' is missing the following properties from type 'HTMLAnchorElement': charset, coords, download, hreflang, and 21 more.