带有 UseRef 的 Typescript 空闲计时器答案

【问题标题】：Typescript Idle Timer with UseRef带有 UseRef 的 Typescript 空闲计时器
【发布时间】：2021-11-03 01:05:33
【问题描述】：

在放弃 Typescript 的边缘，一切似乎都变得更难了。尝试观看一个简单的 react-idle-timer 视频，几分钟后已经面临 Typescript 编译问题。在线搜索有关如何将 useRef 与 typescript 一起使用的指南说，在进行 useRef 调用时，只需将您期望的类型放在中。在纸上听起来对我来说不错并且应该可以工作，但是在这里我又遇到了 TS 的问题。

import { useRef } from 'react';
import IdleTimer from 'react-idle-timer';

function IdleTimerContainer() {
    const idleTimerRef = useRef<IdleTimer | null>(null);
    function onIdle() {
        console.log('user is idle');
    }
    return (
        <div>
            <IdleTimer timeout={5 * 1000} onIdle={onIdle} ref={idleTimerRef} />
        </div>
    );
}
export default IdleTimerContainer;

TS2769：没有重载匹配此调用。 Overload 1 of 2, '(props: IdleTimerClassProps | Readonly): IdleTimer'，给出了以下错误。类型 'MutableRefObject' 不可分配给类型 '(LegacyRef & ((ref: IdleTimer) => any)) |不明确的'。类型 'MutableRefObject' 不可分配给类型 'RefObject & ((ref: IdleTimer) => any)'。类型 'MutableRefObject' 不可分配给类型 '(ref: IdleTimer) => any'。类型 'MutableRefObject' 不匹配签名 '(ref: IdleTimer): any'。 Overload 2 of 2, '(props: IdleTimerClassProps, context: any): IdleTimer'，给出了以下错误。类型 'MutableRefObject' 不可分配给类型 '(LegacyRef & ((ref: IdleTimer) => any)) |不明确的'。 index.d.ts(143, 9)：预期的类型来自属性 'ref'，它在此处声明类型为 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>' index.d.ts(143, 9) ：预期的类型来自属性 'ref'，它在类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>' 上声明

【问题讨论】：

试试useRef<IdleTimer>(null);
这是我尝试的第一件事：'D。 @凯
是的，然后你应该做检查 - 见，fettblog.eu/typescript-react/hooks/#userefif (idleTimerRef && idleTimerRef.current){...}
添加 if (idleTimerRef && idleTimerRef.current) { console.log('typecheck'); } 仍然无法正常工作

标签： reactjs typescript idle-timer

【解决方案1】：

这不是你的错！你的代码很好，是 react-idle-timer 包本身做错了。

interface IdleTimerClassProps extends IdleTimerProps {
    /**
     * React reference to the IdleTimer Component instance.
     */
    ref?: (ref: IdleTimer) => any
}

source code 的这一部分使您只能使用回调样式 ref 而不能使用 ref 对象。

您的 ref 对象应该只是一个 TS 问题，而不是 JS 问题，因此您可以使用 as any 来规避包的问题。

<IdleTimer timeout={5 * 1000} onIdle={onIdle} ref={idleTimerRef as any} />

idleTimerRef 变量上仍然有正确的 TypeScript 类型。

【讨论】：