useRef 的类型（如果与 setInterval、react-typescript 一起使用）

Question

我正在 next.js 应用程序中制作一个简单的动画。

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

Answer 1

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

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

Answer 2

 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 3

我如何使用
*最好设置 useRef 的初始值。这就是为什么为空。

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

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

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