时间戳

首页 > 解决方案 > 带有 UseRef 的 Typescript 空闲计时器

reactjs - 带有 UseRef 的 Typescript 空闲计时器

问题描述

在放弃 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<IdleTimer | null>' 不可分配给类型 '(LegacyRef & ((ref: IdleTimer) => any)) | 不明确的'。类型 'MutableRefObject<IdleTimer | null>' 不可分配给类型 'RefObject & ((ref: IdleTimer) => any)'。类型 'MutableRefObject<IdleTimer | null>' 不能分配给类型 '(ref: IdleTimer) => any'。类型 'MutableRefObject<IdleTimer | null>' 不匹配签名 '(ref: IdleTimer): any'。Overload 2 of 2, '(props: IdleTimerClassProps, context: any): IdleTimer'，给出了以下错误。键入“可变引用对象”< 空闲计时器 | null>' 不可分配给类型 '(LegacyRef & ((ref: IdleTimer) => any)) | 不明确的'。index.d.ts(143, 9)：预期类型来自属性 'ref'，它在此处声明类型为 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>' index.d.ts(143, 9) ：预期的类型来自属性 'ref'，它在类型 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>' 上声明

标签： reactjstypescriptidle-timer

解决方案

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

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

这部分源代码使您只能使用回调样式 ref 而不能使用 ref 对象。

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

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

您仍然可以在idleTimerRef变量上使用正确的 TypeScript 类型。

推荐阅读