如果与 setInterval、react-typescript 一起使用，则为 useRef 键入

编程问答 2022-05-31

问题描述

我正在我的应用中制作一个简单的动画。

let flipInterval = useRef();



const startAnimation = () => {
    flipInterval.current = setInterval(() => {
      setIsFlipping((prevFlipping) => !prevFlipping);
    },10000);
  };

对于 flipInterval.current 我得到“类型‘超时’不可分配给‘未定义’类型”。所以我检查了如何使用超时类型，我看到人们正在使用但那不起作用。

 let flipInterval = useRef<typeof window.settimeout>();

这次我也通过了数字 useRef<number>()，我得到“类型‘超时’不能分配给‘数字’类型”

这也不起作用

  let flipInterval = useRef<typeof window.setInterval>();

解决方法

 const intervalRef: { current: NodeJS.Timeout | null } = useRef(null);


const startAnimation = () => {
   const id = setInterval(() => {
       setIsFlipping((prevFlipping) => !prevFlipping);
   },10000);
      intervalRef.current = id;
 };

  const clear = () => {
    clearInterval(intervalRef.current as NodeJS.Timeout);
  };
,

您需要传递正确的 setInterval 返回值类型。为此使用 ReturnType：

const flipInterval = useRef<ReturnType<typeof setInterval>>(null)
, 
let flipInterval = useRef<number | null>(null);
const startAnimation = () => {
  flipInterval.current = window.setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping);
  },10000);
};

/* way of clear interval */
window.clearInterval(flipInterval.current || 0);
,

您需要使用 NodeJS.Timeout 类型：

let flipInterval = useRef<NodeJS.Timeout>()

const startAnimation = () => {
  flipInterval.current = setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping)
  },10000)
}
,

如果您正在去抖动并且需要清除超时 null 需要处理

由于问题的标题，发帖可能会帮助其他人。

const flipInterval:{current: NodeJS.Timeout | null} = useRef(null)

const startAnimation = () => {
  flipInterval.current && clearTimeout(scrollTimeout.current);
        
  flipInterval.current = setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping)
  },10000)
}
,

我的使用情况
*最好设置useRef的initialValue。这就是 null 的原因。

  const timeout = useRef<NodeJS.Timeout | null>(null);

  timeout.current = setTimeout(() => someAction()),500);

  useEffect(() => {
    return () => clearTimeout(timeout.current as NodeJS.Timeout);
  },[]);
animationanimationreactjsreactjstypescripttypescriptuse-ref