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

Question

我正在我的应用程序中做一个简单的动画。

let flipInterval = useRef();



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

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

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

我还传递了number useRef<number>()，这次我得到“类型'Timeout‘不能赋值给类型'number'”

这也不起作用。

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

Answer 1

 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);
  };

Answer 2

如果您正在解除抖动并需要清除超时，则需要处理null

由于问题的标题，发布这篇文章可能会对其他人有所帮助。

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

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

Answer 3

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

const flipInterval = useRef<ReturnType<typeof setInterval>>(null)