TypeScript中setState未校验类型导致非法值可传入的问题解决需求

我来帮你解决这个类型校验失效的问题，核心原因是TypeScript对setState回调的返回值做了宽松推断，我们可以通过显式约束或泛型封装来修复这个问题。

1. 单个状态的快速修复 #

直接给setState的回调函数指定返回类型，强制TypeScript严格校验返回值是否匹配AddressInfo<boolean>：

const onFocusHandler = (infoType: InfoType) => {
  setFormErrors((prevState): AddressInfo<boolean> => ({
    ...prevState, 
    [infoType]: 'foo' // 这里会立即抛出类型错误："string"不能赋值给"boolean"
  }));
};

这样修改后，任何不符合boolean类型的值都会被TypeScript实时检测到，完全符合你的需求。

2. 通用解决方案（适配多类型状态） #

考虑到你还有一个使用AddressInfo<string>的状态，我们可以封装一个泛型函数来生成类型安全的状态更新处理器，兼顾复用性和类型校验：

// 生成通用的状态更新处理器
const createFocusHandler = <T>(
  setState: React.Dispatch<React.SetStateAction<AddressInfo<T>>>
) => {
  return (infoType: InfoType, value: T) => {
    setState(prevState => ({
      ...prevState,
      [infoType]: value
    }));
  };
};

// 针对boolean类型的状态使用
const onBooleanFocusHandler = createFocusHandler(setFormErrors);
onBooleanFocusHandler(InfoType.POSTAL_CODE, false); // ✅ 类型正确
onBooleanFocusHandler(InfoType.POSTAL_CODE, 'foo'); // ❌ 类型错误：string无法赋值给boolean

// 针对string类型的状态使用
const [formValues, setFormValues] = useState<AddressInfo<string>>({
  street: '',
  additionalStreet: '',
  postCode: '',
  city: '',
});
const onStringFocusHandler = createFocusHandler(setFormValues);
onStringFocusHandler(InfoType.CITY, 'Berlin'); // ✅ 类型正确
onStringFocusHandler(InfoType.CITY, true); // ❌ 类型错误：boolean无法赋值给string

这个方案的优势在于，不管你的AddressInfo泛型参数是boolean、string还是其他类型，都能生成对应的类型安全处理器，调用时还会自动提示参数类型，避免手动出错。

为什么原代码没有报错？ #

在你最初的代码里，TypeScript对回调返回值做了宽松推断：展开prevState（AddressInfo<boolean>类型）加上[infoType]: 'foo'后，它会把结果推断为AddressInfo<boolean> & { [x: string]: string }的交叉类型，这种类型在TS中是被允许的（因为枚举值可以被当作字符串处理），所以没有触发错误。而当我们显式指定返回类型或通过泛型约束后，TS会强制校验返回值必须完全匹配AddressInfo<T>的结构，从而拦截不符合要求的值。

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