如何在TypeScript中遍历异构对象并处理带null删除的更新

你需要合并两个对象，其中更新对象的null值表示删除原对象对应属性，直接用扩展运算符{...a, ...b}无法实现，遍历处理时遇到TypeScript类型推断错误。

1. 让TypeScript正确推断类型的方法 #

核心问题是Object.entries()返回的键类型是string，TypeScript无法自动关联到原对象的具体键类型。可以通过泛型函数+类型断言让TS正确识别键值对应关系：

function applyUpdate<T extends Record<string, any>>(target: T, update: Partial<T>) {
  // 将Object.keys的结果断言为原对象的键数组
  (Object.keys(update) as Array<keyof T>).forEach(key => {
    const value = update[key];
    if (value === undefined) return;
    
    if (value === null) {
      delete target[key];
    } else {
      // 此时TS能推断value类型与target[key]匹配
      target[key] = value;
    }
  });
}

// 使用示例
applyUpdate(obj, objUpdate);

这个泛型函数会约束key为原对象的键类型，同时让TS识别value与目标对象对应键的类型匹配，避免类型错误。

如果不想封装函数，也可以在遍历里手动做更精确的类型断言：

(Object.entries(objUpdate) as Array<[keyof typeof obj, typeof obj[keyof typeof obj] | null | undefined]>).forEach(([k, v]) => {
  if (v === undefined) return;
  if (v === null) {
    delete obj[k];
    return;
  }
  obj[k] = v;
});

通过把Object.entries的结果断言为包含原对象键和对应值类型的数组，TS就能正确推断类型。

2. 更优实现方案 #

方案一：创建新对象（不可变更新） #

如果不需要修改原对象，而是生成新对象，这种方式更符合函数式编程习惯，也能避免类型问题：

// 先合并非null/undefined的更新项
const updatedObj = {
  ...obj,
  ...Object.fromEntries(
    Object.entries(objUpdate).filter(([_, v]) => v !== null && v !== undefined)
  )
} as typeof obj;

// 删除更新项中值为null的属性
Object.keys(objUpdate).forEach(key => {
  if (objUpdate[key as keyof typeof objUpdate] === null) {
    delete updatedObj[key as keyof typeof updatedObj];
  }
});

方案二：使用Immer库处理复杂更新 #

如果经常需要这类对象更新操作，推荐使用Immer库，它能简化不可变更新的代码，同时自动处理类型：

import { produce } from 'immer';

const updatedObj = produce(obj, draft => {
  for (const [key, value] of Object.entries(objUpdate)) {
    if (value === undefined) continue;
    if (value === null) {
      delete draft[key as keyof typeof obj];
    } else {
      draft[key as keyof typeof obj] = value as typeof draft[keyof typeof draft];
    }
  }
});

Immer通过代理对象实现“可变写法，不可变结果”，代码更直观，也能避免手动处理类型的麻烦。

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