为何TypeScript允许setState返回额外属性？映射类型校验失效疑问

核心原因 #

TypeScript的额外属性检查仅针对直接声明的对象字面量，当你展开已存在的prevState对象后添加额外属性时，TS不会触发该检查——它默认你是在扩展已有状态对象，而非创建一个严格符合类型定义的新字面量，因此会忽略test:6这类不属于FormValidationState<T>的属性。这不是TS的能力缺陷，而是其类型检查的设计逻辑。

解决方法 #

1. 给更新函数显式指定返回类型

这是最直接的编译时约束方式，强制要求返回值严格匹配FormValidationState<T>：

type ValidationPayload = { /* 你的Payload类型定义 */ };
type FormValidationState<T> = { [K in keyof T]: ValidationPayload };

const [formValidation, setFormValidation] = useState<FormValidationState<MyForm>>(initialState);

// 给更新函数指定返回类型，TS会严格检查返回值
setFormValidation((prevState): FormValidationState<MyForm> => {
  // 这里如果写test:6会直接编译报错
  return { ...prevState, [validKey]: newValidationPayload };
});

2. 手动过滤非法属性（运行时+编译时双重保障）

如果需要确保运行时也不会残留非法属性，可以在更新时过滤掉不属于目标类型的键：

setFormValidation(prevState => {
  const tempState = { ...prevState, test: 6 };
  // 只保留prevState中存在的键（即符合FormValidationState的键）
  const validState = Object.fromEntries(
    Object.entries(tempState).filter(([key]) => key in prevState)
  ) as FormValidationState<MyForm>;
  return validState;
});

3. 用类型工具约束临时对象

可以通过Pick或Omit来约束临时对象的键，避免意外添加非法属性：

setFormValidation(prevState => {
  // 仅允许修改FormValidationState中的指定键
  const updatedPart: Pick<FormValidationState<MyForm>, "username"> = {
    username: newValidationPayload
  };
  return { ...prevState, ...updatedPart };
});

关于强制转换无效的说明 #

如果你之前尝试的是{ ...prevState, test:6 } as FormValidationState<T>，这种方式只是告诉TS“信任我，这个对象符合类型”，但TS不会主动剔除非法属性，编译时不会报错，运行时属性依然存在。正确的做法是给更新函数指定返回类型，让TS在编译阶段就拦截非法属性的添加。

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