TypeScript React中如何指定useState的类型 初始值为null可赋值为数字

错误原因 #

TypeScript 默认会根据 useState 传入的初始值自动推断 state 类型，你初始值传入的是 null，TS 就会推断该 state 的类型为固定的 null，不允许后续赋值为其他类型，所以传入数字类型的 2 时会触发类型校验报错。

正确写法 #

手动给 useState 传入联合类型泛型，显式声明该 state 支持的所有类型即可：

// 声明 state 可以是 number 类型或 null 类型
const [intervalId, setIntervalId] = useState<number | null>(null);

修改后再调用 setIntervalId(2) 就不会触发类型错误了。

如果你这个 state 实际是用来存储原生 setInterval 的返回值，浏览器环境下还可以用更精准的类型定义：

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

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