React+TypeScript中调用泛型setter时如何正确传递setState类型？

核心原因 #

HTML 中 <input type="radio"> 的 value 属性无论你传入的是数字还是其他类型，最终都会被浏览器解析为字符串类型。你之前用 as T 只是给 TypeScript 做类型断言，并没有改变运行时的实际值，所以 console.log 显示的是真实的字符串类型。另外，TS 中推荐使用小写的原始类型（number）而非包装对象类型（Number），后者几乎不会在业务代码中使用。

解决方案 #

需要在 radioSetter 中加入实际的类型转换逻辑，而不是单纯依赖类型断言。以下是两种可行的实现方式：

方式一：通用型 setter（支持多种类型转换）

通过传入转换函数，让 setter 适配不同的目标类型：

// 修正 useState 类型为 number（推荐用原始类型）
const [payer, setPayer] = useState<number>(0);

// 支持自定义转换的通用 setter
const radioSetter = <T>(
  e: React.FormEvent<HTMLInputElement>,
  setter: React.Dispatch<React.SetStateAction<T>>,
  transform: (rawValue: string) => T
) => {
  const convertedValue = transform(e.currentTarget.value);
  console.log(typeof convertedValue); // 此时会输出 number
  setter(convertedValue);
};

// 调用时传入数字转换逻辑
<input
  type="radio"
  name="payer"
  value={0}
  checked={payer === 0}
  onChange={(event) => radioSetter<number>(event, setPayer, val => parseInt(val, 10))}
/>

方式二：专用数字型 setter（更简洁）

如果只需要处理数字类型的单选框，可以直接写专用的 setter：

const [payer, setPayer] = useState<number>(0);

// 专门处理数字类型的 radio setter
const numberRadioSetter = (
  e: React.FormEvent<HTMLInputElement>,
  setter: React.Dispatch<React.SetStateAction<number>>
) => {
  const numericValue = parseInt(e.currentTarget.value, 10);
  setter(numericValue);
};

// 调用时直接传入
<input
  type="radio"
  name="payer"
  value={0}
  checked={payer === 0}
  onChange={(e) => numberRadioSetter(e, setPayer)}
/>

关键提示 #

• 永远不要依赖类型断言来改变运行时的值，类型断言仅用于告诉 TypeScript 你确认某个值的类型，不会修改实际数据。
• 处理表单输入时，必须根据目标类型做显式的转换（比如字符串转数字、转布尔值等），因为表单元素的输入值默认都是字符串。

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