類型“從不”上不存在屬性“單擊”。 TS2339

Question

根據關於 TypeScript 此類錯誤的其他類似問題（關於問題#44147937和#40796374 ），我發現分配null來創建狀態或引用會導致此問題： Property ... does not exist on type 'never'

如何在此示例組件中處理此問題？

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 無法從您稍后在代碼中使用它的位置推斷 ref 的類型，您必須告訴它 ref 的類型：

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

（ useRef將null類型添加到您提供的類型參數中，因此您不必使用<HTMLDivElement | null> 。）

Answer 2

我找到了解決這個問題的方法。

將<HTMLAnchorElement>賦予 useRef 將解決此問題：

  const linkRef = useRef<HTMLAnchorElement>(null);

重要提示：我必須使用 null 來創建這種類型的 ref 以傳遞給元素，因此無法更改它。

重要提示：分配<HTLMDivElement>或<HTMLElement>將導致另一個錯誤：

TS2322：類型“RefObject”不可分配給類型“Ref | 不明確的'。 類型“RefObject”不可分配給類型“RefObject”。 “HTMLElement”類型缺少“HTMLAnchorElement”類型中的以下屬性：字符集、坐標、下載、hreflang 等 21 個。