带UseRef的Typescript空闲定时器

Question

在放弃Typescript的边缘，一切似乎都变得更加困难。尝试遵循一个简单的反应空闲计时器视频和几分钟已经面临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:没有重载匹配这个调用。重载1/2，'(props: IdleTimerClassProps | Readonly): IdleTimer'，给出以下错误。类型'MutableRefObject'不能赋值给类型'RefObject &(ref: IdleTimer) =>任何 )'.         类型' mutableefobject'没有为签名'(ref: IdleTimer): any'提供匹配。重载2的2，'(props: IdleTimerClassProps, context: any): IdleTimer'，给出以下错误。类型'MutableRefObject

这不是你的错!你的代码很好，是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类型。