在React本地状态存储setInterval时，对应的TypeScript类型应该如何定义？

问题根因 #

你声明的state类型不匹配，setInterval的返回值不是函数类型，因此() => void的类型定义无法匹配。

• 浏览器环境下，setInterval返回值为数字类型的定时器ID
• Node.js 环境下，setInterval返回值为NodeJS.Timeout类型的实例

对应修复方案 #

方案1：浏览器端项目（绝大多数前端React场景） #

直接声明state类型为number | null即可，初始值设为null便于判断定时器是否正在运行：

const [counter, setCounter] = useState<number | null>(null);

const setTime = () => {
    const timerId = setInterval(() => {
        setTimer((prevState) => ({ 
            minutes: prevState.minutes, 
            seconds: prevState.seconds - 1 
        }));
    }, 1000);
    setCounter(timerId);
};

// 清除定时器示例
const clearTimer = () => {
    if(counter) clearInterval(counter);
    setCounter(null);
};

方案2：Node.js环境（如Next.js服务端逻辑、Electron主进程逻辑） #

将state类型声明为NodeJS.Timeout | null即可：

const [counter, setCounter] = useState<NodeJS.Timeout | null>(null);

通用兼容方案 #

如果你不确定运行环境，可以直接使用TS内置的ReturnType工具类型自动推导setInterval的返回值，无需手动区分环境：

const [counter, setCounter] = useState<ReturnType<typeof setInterval> | null>(null);

注意：请在组件卸载钩子中主动清除定时器，避免内存泄漏。

内容的提问来源于stack exchange，提问作者Richardson