type for useRef如果与setInterval一起使用，则使用react typescript

Question

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

let flipInterval = useRef();

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

对于CCD_ 1；类型"Timeout"不可分配给类型"undefined"；。所以我检查了如何使用Timeout类型，我看到人们正在使用，但这不起作用。

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

我这次也通过了号码CCD_ 2；类型"Timeout"不可分配给类型"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的initialValue。这就是null的原因。

const timeout = useRef<NodeJS.Timeout | null>(null);
timeout.current = setTimeout(() => someAction()), 500);
useEffect(() => {
return () => clearTimeout(timeout.current as NodeJS.Timeout);
}, []);

Answer 4

如果您正在退出并需要清除超时null，则需要处理

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

const flipInterval:{current: NodeJS.Timeout | null} = useRef(null)
const startAnimation = () => {
flipInterval.current && clearTimeout(scrollTimeout.current);

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

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

Answer 6

您需要使用NodeJS.Timeout类型：

let flipInterval = useRef<NodeJS.Timeout>()
const startAnimation = () => {
flipInterval.current = setInterval(() => {
setIsFlipping((prevFlipping) => !prevFlipping)
}, 10000)
}