TypeScript对象字段赋值无法推导对应值类型该如何解决？

TypeScript 对联合类型的解构操作不会保留不同字段之间的关联关系：

• 你定义的Payload<CounterState>是由4个互斥的对象类型组成的联合类型，每个对象中fieldName和value的类型是一一对应的
• 当你把action.payload解构为fieldName和value两个独立变量后，TS 会把两个变量分别推导为独立的联合类型：
  • fieldName推导为"id" | "status" | "email" | "password"
  • value推导为string | "idle" | "loading" | "failed"
• 两个变量之间原有的绑定关系会丢失，TS 无法判断当前value的类型和fieldName指向的属性类型是匹配的，就会误认为你可能把普通字符串赋值给status属性，因此抛出类型错误。

以下是几种常用的落地方案：

方案1：不解构，直接使用payload对象操作（最简便） #

TS 对未解构的联合类型对象会保留字段关联关系，直接通过对象属性访问即可通过类型校验（适配TS 4.6及以上版本）：

case 'UPDATE_FIELD':
  const nState = { ...state };
  // 不解构，直接访问属性保留类型关联
  nState[action.payload.fieldName] = action.payload.value;
  return nState;

方案2：使用类型断言（适合确定逻辑无问题的场景） #

如果你确认业务逻辑不会出现类型不匹配的情况，可以用类型断言跳过校验：

// 用never断言更安全，符合联合类型赋值的交叉特性
nState[fieldName] = value as never;

方案3：封装泛型更新函数（最安全，可复用） #

封装通用的泛型更新函数，通过泛型约束自动关联字段和值的类型：

function updateStateField<T extends object, K extends keyof T>(state: T, fieldName: K, value: T[K]) {
  state[fieldName] = value;
}

// 在reducer中调用即可自动推导类型
updateStateField(nState, fieldName, value);

方案4：分支判断类型守卫（适合属性数量少的场景） #

对每个fieldName做分支判断，TS 会在每个分支中自动收窄类型，天然符合类型校验规则：

switch(fieldName) {
  case 'status':
    nState.status = value;
    break;
  case 'id':
    nState.id = value;
    break;
  case 'email':
    nState.email = value;
    break;
  case 'password':
    nState.password = value;
    break;
}

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