为什么TypeScript无法识别我给useState状态变量定义的类型？

你遇到的报错本质是触发了React useState 的惰性初始化重载规则：

• useState 存在内置的类型重载：如果入参是函数类型，TypeScript会默认将该函数判定为惰性初始化函数，也就是useState会执行这个函数，将它的返回值作为state的初始值，而非将函数本身作为state值存储。
• 你传入的() => {} 是返回值为void的函数，被useState执行后得到的初始值类型就是void，因此useState推导返回的元组类型为[void, Dispatch<SetStateAction<void>>]，和你手动声明的[Fn, Dispatch<SetStateAction<Fn>>] 类型不匹配，就抛出了对应的类型错误。

你的理解偏差在于默认假设传入useState的函数会被当作state值，但这不符合useState的设计规则，属于操作逻辑错误。

有两种严格类型定义的方案，优先推荐第一种更简洁的写法：

• 方案1：给useState显式传入泛型，明确告知TypeScript你要存储的state类型是Fn，跳过默认的惰性初始化推导逻辑：

import React, { useState } from 'react'

type Fn = () => void

export const Component = () => {
  const [fn, setFn] = useState<Fn>(() => {})
  return <p>{`${typeof fn}, ${typeof setFn}`}</p>
}

这种写法不需要手动给返回的[fn, setFn]加类型注解，TypeScript会根据泛型自动推导出正确的类型。

• 方案2：将初始函数包在一层惰性初始化函数中返回，让useState执行外层函数后，拿到的返回值就是你要存储的函数本身：

const [fn, setFn]: [Fn, Dispatch<SetStateAction<Fn>>] = useState(() => () => {})

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