React Reducer中TypeScript TS2322错误的解决方法咨询

问题背景 #

现有React Reducer中的TypeScript类型定义：

type Filters = {
  hidden: boolean | null,
  status: number | null,
  // ... 其他过滤器已省略
}

type FilterPayload = {
  [key in keyof Filters]: Filters[keyof Filters]
}

type Action = { type: 'set-filter', payload: FilterPayload }
//... 其他联合类型已省略

function dispatch(action: Action) : void

尝试合并action.payload到过滤器对象时触发类型错误：

let filters: Filters = {
  hidden: null,
  status: null
}

filters = { 
  ...filters, 
  ...action.payload // <- TS2322 错误
}

错误信息：

error TS2322: Type '{ hidden: number | boolean | null; status: number | boolean | null; }' is not assignable to type 'Filters'
  Types of property 'hidden' are incompatible.
    Type 'number | boolean | null' is not assignable to type 'boolean | null'.
      Type 'number' is not assignable to type 'boolean | null'.

问题原因 #

当前FilterPayload的定义错误地将每个属性的类型设置为Filters所有属性类型的联合（比如hidden允许接收number | boolean | null），破坏了原类型的对应关系，导致TypeScript无法保证合并后类型符合Filters的约束。

解决方案 #

无需枚举所有属性组合，通过以下两种方式修复类型定义：

方案1：支持多属性部分更新（推荐） #

直接使用Partial工具类型，保留原属性的类型约束，同时允许只传递部分过滤器属性：

// 修改FilterPayload的定义
type FilterPayload = Partial<Filters>

// 对应的Action类型保持不变
type Action = { type: 'set-filter', payload: FilterPayload }

此时合并操作的类型检查会正常通过，因为Partial<Filters>确保每个属性的类型都和原Filters对应属性一致，且允许只更新部分属性。

方案2：严格单属性更新 #

如果业务场景要求每次只能更新单个过滤器属性，可以使用映射类型生成单属性更新的payload类型：

// 定义只能更新单个属性的payload
type FilterPayload = {
  [K in keyof Filters]: { key: K; value: Filters[K] }
}[keyof Filters]

// 调整Action类型
type Action = { type: 'set-filter', payload: FilterPayload }

// 使用时的更新逻辑
filters = {
  ...filters,
  [action.payload.key]: action.payload.value
}

这个方案能强制每次只修改一个属性，进一步提升类型安全性。

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