TypeScript中如何更新嵌套数组对象属性且不修改原数据？

你的写法错误在于直接将数组元素的属性扩展到了父对象上，并没有对books数组本身进行正确的嵌套更新。要在不修改原数据、保持结构完整的前提下更新目标属性，需要逐层进行不可变复制：

针对已知索引的直接更新（以第一个元素为例） #

如果明确知道要更新的是数组的第一个元素，可以这样写：

const updatedData = {
  ...defaultData,
  books: [
    // 复制第一个book对象并修改目标属性
    { ...defaultData.books[0], panelsCollected: 123 },
    // 保留数组中其他未修改的元素
    ...defaultData.books.slice(1)
  ]
};

通用的按条件更新（比如根据bookId匹配） #

如果需要根据bookId动态找到目标元素更新（更符合实际业务场景），可以用map方法处理数组：

const targetBookId = "1";
const updatedData = {
  ...defaultData,
  books: defaultData.books.map(book => 
    book.bookId === targetBookId 
      ? { ...book, panelsCollected: 123 } 
      : book // 未匹配到的元素直接保留原引用
  )
};

关键说明 #

• 每一层嵌套对象/数组都通过扩展运算符(...)或slice/map进行浅复制，确保原数据不会被修改
• 只对需要更新的元素进行属性重写，其余元素保持原样，保证数据结构的完整性
• TypeScript会自动推断类型，无需额外定义类型（如果已有自定义类型，也能完美兼容）

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