TypeScript如何为多维数组列值求和函数添加正确类型约束

实现方案 #

我们可以通过TypeScript泛型约束实现需求，改造后的代码如下：

export class MathUtils {
    // 泛型约束：K必须是T的键，且T的K属性必须为number类型
    static sum<T extends Record<K, number>, K extends keyof T>(values: T[], key: K): number {
        return values.reduce((acc, cur) => acc + cur[key], 0);
    }
}

约束说明 #

• key必须为数组元素的合法键：通过K extends keyof T实现，传入不在对象键集合中的参数时，TypeScript会直接抛出编译错误
• 对应key的属性值必须为number：通过T extends Record<K, number>实现，仅约束指定key对应的属性为number，对象其他属性可以是任意类型，符合需求

使用示例 #

// 示例对象类型，productName为string类型，id和amount为number类型
interface Order {
  id: number;
  productName: string;
  amount: number;
}

const orders: Order[] = [
  { id: 1, productName: '键盘', amount: 99 },
  { id: 2, productName: '鼠标', amount: 49 },
  { id: 3, productName: '显示器', amount: 899 }
];

// 合法调用，返回 99+49+899 = 1047
const totalAmount = MathUtils.sum(orders, 'amount');

// 以下调用会直接编译报错：
// 1. 传入不存在的键：MathUtils.sum(orders, 'price')
// 2. 传入的键对应值不是number：MathUtils.sum(orders, 'productName')

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