“从不”类型上不存在属性“点击”。 TS2339答案

【问题标题】：Property 'click' does not exist on type 'never'. TS2339“从不”类型上不存在属性“点击”。 TS2339
【发布时间】：2021-10-05 22:46:50
【问题描述】：

根据关于 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>
}

【问题讨论】：

标签： javascript reactjs typescript react-hooks

【解决方案1】：

TypeScript 无法从您稍后在代码中使用它的位置推断 ref 的类型，您必须告诉它 ref 的类型：

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

（useRef 将null 类型添加到您给它的类型参数中，因此您不必使用<HTMLDivElement | null>。）

【讨论】：

感谢您的解释，但我的问题仍然存在。我没有使用或任何类型来定义 useRef（请参阅我的代码 sn-p 问题）
我已经重新创建了您的代码并且它正在工作。 @novonimo
@novonimo - 您使用的是div，此处：<div ref={myRef} />。当我将您的代码复制到 Preact/TypeScript 项目中时（FunctionalComponent 告诉我您正在使用 Preact），我收到了您描述的错误。当我添加上面答案中所示的类型时，错误就消失了。如果我在 React/TypeScript 项目中这样做并将 FunctionalComponent 更改为 FunctionComponent，也是一样的。也许您只是没有正确添加更改？
我只是编辑我的帖子并修复了 FunctionCompnent。我正在使用 React 并使用 FunctionComponent 类型 @T.J.Crowder
@novonimo - 不，问题中的代码不会发生这些错误，如答案所示修改。证明：codesandbox.io/s/recursing-pare-neihr?file=/src/App.tsx