TypeScript中在forEach里扩展Interface出现报错如何解决？

错误原因 #

1. 语法错误：MyInterface extends { newVar: string }是TypeScript条件类型的专属语法，不能直接用于变量类型注解，因此触发?预期的报错。
2. 类型不兼容错误：AllData本身是MyInterface[]类型，TypeScript要求forEach回调的参数类型必须与数组元素类型兼容，直接将参数标注为带newVar的扩展类型时，原MyInterface缺少对应属性，因此抛出不兼容报错。

解决方案 #

根据使用场景二选一即可：

方案1：直接修改原数组（需类型断言） #

如果确定要在原数组元素上追加属性，使用类型断言明确告知TypeScript操作预期即可：

// 遍历内单独断言，适合仅此处需要扩展属性的场景
AllData.forEach((item) => {
  const extendedItem = item as MyInterface & { newVar: string };
  extendedItem.newVar = "Hello World";
});

// 提前断言整个数组，适合后续多处需要用到扩展属性的场景
type MyInterfaceExt = MyInterface & { newVar: string };
const extendedData = AllData as MyInterfaceExt[];
extendedData.forEach(item => {
  item.newVar = "Hello World";
});

方案2：生成新数组（类型安全，无需断言） #

如果可以不修改原数组，推荐使用map生成新数组，TypeScript会自动推导扩展后的类型，不需要额外类型处理：

const extendedAllData = AllData.map(item => ({
  ...item,
  newVar: "Hello World"
}));
// 后续直接使用extendedAllData，类型自动为 (MyInterface & { newVar: string })[]

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