TypeScript使用reduce遍历对象数组提取属性时类型报错如何解决

问题原因 #

你代码的问题出在reduce回调函数的返回值类型不符合要求：
reduce要求回调函数每次返回的值的类型，必须和初始值（你这里初始是AnyType['name'][]数组类型）完全一致。你之前直接返回b.name是单个的'A'|'B'|'C'字符串类型，和数组类型不匹配，所以触发类型报错。

修复方案 #

方案1：修正reduce回调逻辑 #

你需要把当前遍历到的name推入累计的数组，再返回整个数组即可：

const namesArray = myArray.reduce<AnyType['name'][]>((acc, cur) => {
  acc.push(cur.name);
  return acc;
}, []);

如果你偏好无突变的写法，也可以用数组解构：

const namesArray = myArray.reduce<AnyType['name'][]>((acc, cur) => [...acc, cur.name], []);

方案2：更适配场景的map写法 #

如果只是单纯提取数组所有元素的某一个属性组成新数组，map方法比reduce更简洁，也不需要手动声明泛型就能正确推断类型：

const namesArray = myArray.map(item => item.name);

TypeScript会自动推断namesArray的类型就是('A'|'B'|'C')[]，完全符合需求。

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