TypeScript+React报Property 'previous'缺失类型错误的修复方案

两种思路的问题点评 #

你考虑的两种修复方案都存在明显缺陷：

• 把接口所有字段改成可选属性的方案完全不推荐：这种做法本质是为了绕开类型检查主动破坏类型约束，相当于放弃了TS的类型保护能力。后续所有用到这些字段的位置都需要额外做空值判断，平白增加大量冗余代码，还容易因为漏判空值引发线上问题。只有当字段在业务逻辑中确实允许不存在时，才应该将其设置为可选属性，不要为了临时解决报错随意修改类型定义。
• 手动透传所有未修改字段的方案逻辑上是正确的，但写法过于冗余，一旦后续接口新增字段，所有更新状态的位置都要同步修改，维护成本很高，嵌套层级深的时候写起来也非常繁琐。

推荐写法 #

1. 普通场景：嵌套对象展开更新 #

更新嵌套状态时，对要修改的嵌套层级也做展开操作，先透传该层级下的所有原有字段，再覆盖需要修改的字段即可，完全符合TS类型要求，也不需要修改原有接口定义：

setPropertyTax({
  ...propertyTax,
  annul: {
    ...propertyTax.annul, // 透传annul下原有所有字段（current、previous）
    current: validatedValue // 仅覆盖需要更新的current字段
  },
  monthly: {
    ...propertyTax.monthly, // 透传monthly下原有所有字段
    current: monthlyPropertyTax // 仅覆盖需要更新的current字段
  }
});

这种写法是嵌套状态更新最常用的写法，代码简洁，不容易漏写保留字段。

2. 依赖旧状态场景：函数式更新 #

如果你的状态更新逻辑在异步回调、循环等场景中，存在闭包拿到旧状态的风险，推荐使用useState的函数式更新写法，始终基于最新的状态值做更新：

setPropertyTax(prevState => ({
  ...prevState,
  annul: {
    ...prevState.annul,
    current: validatedValue
  },
  monthly: {
    ...prevState.monthly,
    current: monthlyPropertyTax
  }
}));

如果项目中存在大量深层嵌套的状态更新，也可以考虑使用immer这类不可变数据工具简化写法，但对于你当前的两层嵌套场景，直接用展开运算符就足够简洁清晰，不需要额外引入依赖。

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