TypeScript roles数组赋值时string[]类型不匹配报错问题

当前代码触发类型不匹配，是两个逻辑错误叠加导致的：

• 链式转换多了一层错误的映射：你已经通过data.roles.map(role => ({name: role.name}))把后端返回的角色数据转成了符合{name: string}结构的对象数组，但紧接着又追加了一层.map(role => role.name)，直接把数组中的对象全部转成了纯字符串，最终得到的结果是string[]类型，和push方法要求的单个{name: string}类型参数完全不匹配，这就是类型报错的直接来源。
• 数组API用法不符合预期：Array.push()的入参是若干个需要插入到数组末尾的单个元素，不支持直接把整个待插入数组作为参数传入，哪怕类型匹配，也会把数组作为嵌套元素塞进去，得到的数组结构是错误的。

1. 移除多余的字符串转换逻辑，只保留一次对象格式的映射，保证输出的是Array<{name: string}>类型的合法数据
2. 利用展开运算符...把待插入的角色数组拆成单个元素，再传入push方法，既保证类型匹配，也能避免嵌套数组的问题
3. 复用同一段转换逻辑给selRoles赋值，减少重复代码

修正后的完整代码如下：

this.userService.getUserById(this.id).subscribe(data => {
  this.user = data; 
  // 统一做角色数据格式标准化，后续逻辑复用
  const normalizedRoles = data.roles.map(role => ({ name: role.name }));
  // 展开数组后批量推入，避免类型不匹配和嵌套问题
  this.user.roles.push(...normalizedRoles);
  this.selRoles = normalizedRoles;
})

额外提示：如果业务逻辑是用后端返回的角色直接覆盖用户对象的现有角色列表，不需要在原有数组基础上追加数据，可以跳过push步骤，直接执行this.user.roles = normalizedRoles即可，减少不必要的数组操作。

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