TypeScript扩展Array调用sum报错array.sum is not a function如何解决？

• 场景1报错array.sum is not a function：TS的类型断言仅作用于编译期的类型校验，不会修改运行时的对象原型。你声明的ArrayElements类是Array的子类，但普通数组实例的原型链上并没有挂载sum方法，仅靠类型断言强行把普通数组标记为ArrayElements类型，运行时自然找不到该方法。
• 场景2编译报错参数不匹配：你继承Array时没有显式声明数组元素的泛型类型，TS默认将ArrayElements识别为元素类型为number的数组子类，传入对象类型的元素自然触发类型不匹配报错。

方案1：修正自定义Array子类的写法 #

给子类加上泛型约束，明确指定数组元素类型，实例化时直接用子类构造函数创建数组：

class ArrayElements<T> extends Array<T> {
  sum(key: keyof T): number {
    return this.reduce((acc, cur) => acc + (Number(cur[key]) || 0), 0);
  }
}

// 实例化时指定元素类型，传入数组元素
const values = new ArrayElements<{ aaa: number }>({aaa: 123}, {aaa: 1313});
console.log(values.sum("aaa")); // 输出 1436

方案2：使用独立工具函数（更推荐） #

扩展原生Array容易引入原型污染、跨上下文执行异常等问题，更建议封装独立的求和工具函数：

function sumBy<T>(arr: T[], key: keyof T): number {
  return arr.reduce((acc, cur) => acc + (Number(cur[key]) || 0), 0);
}

// 直接对普通数组使用，无需修改数组本身的类型
const array = [{aaa: 123}, {aaa: 1313}];
console.log(sumBy(array, "aaa")); // 输出 1436

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