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

【问题标题】：type for useRef if used with setInterval, react-typescript如果与 setInterval、react-typescript 一起使用，则为 useRef 键入
【发布时间】：2021-04-14 17:14:07
【问题描述】：

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

let flipInterval = useRef();



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

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

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

我也传递了号码useRef<number>() 这次我得到“类型'超时'不可分配给类型'号码'”

这也没用

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

【问题讨论】：

setInterval 返回一个用于清除计时器的 id。您不应该将其存储在参考文献中。
@BeS 你有什么建议？即使组件由于某种原因重新呈现，我也想坚持时间。
不清楚你想要实现什么。如果你只是想清除组件被移除的时间间隔，那么你应该使用返回清理函数的useEffect()。

标签： reactjs typescript animation settimeout use-ref

【解决方案1】：

我是如何使用的
*最好设置useRef的initialValue。这就是为什么 null。

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

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

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

【讨论】：

【解决方案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);
  };

【讨论】：

【解决方案3】：

如果你正在去抖，需要清除超时null需要处理

由于问题的标题，这可能对其他人有所帮助。

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

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

【讨论】：

【解决方案4】：

你需要使用NodeJS.Timeout类型：

let flipInterval = useRef<NodeJS.Timeout>()

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

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

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

【讨论】：