Typescript Idle Timer with UseRef

Question

On the verge of giving up on Typescript, everything just seems to be made harder. Trying to follow a simple react-idle-timer video and a few minutes in already facing Typescript compilation problems. Searching online for guides on how to use useRef with typescript says to just put the type you expect in <> when making the useRef call. On paper that sounds good to me and should work, yet here I am facing issues yet again with 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: No overload matches this call. Overload 1 of 2, '(props: IdleTimerClassProps | Readonly): IdleTimer', gave the following error. Type 'MutableRefObject<IdleTimer | null>' is not assignable to type '(LegacyRef & ((ref: IdleTimer) => any)) | undefined'. Type 'MutableRefObject<IdleTimer | null>' is not assignable to type 'RefObject & ((ref: IdleTimer) => any)'. Type 'MutableRefObject<IdleTimer | null>' is not assignable to type '(ref: IdleTimer) => any'. Type 'MutableRefObject<IdleTimer | null>' provides no match for the signature '(ref: IdleTimer): any'. Overload 2 of 2, '(props: IdleTimerClassProps, context: any): IdleTimer', gave the following error. Type 'MutableRefObject<IdleTimer | null>' is not assignable to type '(LegacyRef & ((ref: IdleTimer) => any)) | undefined'. index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>' index.d.ts(143, 9): The expected type comes from property 'ref' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'

yep and then you are suppose to do the checks - see, https://fettblog.eu/typescript-react/hooks/#useref `if (idleTimerRef && idleTimerRef.current){...}` — Kay, Sep 05 '21 at 18:27
Adding `if (idleTimerRef && idleTimerRef.current) { console.log('typecheck'); }` still isn't working — TrollBearPig, Sep 05 '21 at 18:35

score 4 · Answer 1 · answered Sep 19 '21 at 22:53

It's not your fault! Your code is fine, it's the react-idle-timer package itself that's doing it wrong.

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

This section of the source code makes it so that you can only use a callback style ref and not a ref object.

Your ref object should be just a TS issue, not a JS issue, so you can circumvent the problems with the package by using as any.

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

You'll still have proper TypeScript types on the idleTimerRef variable.

Typescript Idle Timer with UseRef

1 Answers1