TypeScript中为useState定义<number | ''>泛型的含义疑问

问题解答 #

你定义的useState<number | "">("")中的泛型参数，作用是限定enteredAge状态在组件全生命周期内所有允许的取值类型，不是仅限制初始值：

• 初始值设置为""符合类型要求，因为空字符串是你声明的联合类型的合法成员
• 后续调用setEnteredAge更新状态时，也仅支持传入number类型值或空字符串""，传入其他值（比如非空字符串、undefined等）都会触发TypeScript类型校验报错

举个实际使用的示例：

// 合法操作
setEnteredAge(23)
setEnteredAge("")

// 非法操作，会触发TS报错
setEnteredAge("23") // 字符串"23"不属于number | ""类型
setEnteredAge(undefined) // undefined未被包含在你声明的联合类型中

这种类型定义的常见使用场景是绑定数值类表单输入框：初始状态为空，用户输入内容后转为数字存储，用户清空输入框时重置为空字符串，完全匹配业务逻辑的类型要求。

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