管道变换使用 reduce 用于对象数组

如何解决管道变换使用 reduce 用于对象数组

这是我的界面文件：

export interface ListCount {
  centre?: string;
  cause?: string;
  totalTime?: number;
}

我正在尝试使用管道变换减少对象数组：

export class SumPipe implements PipeTransform {
  transform(items: ListCount[],attr: string): number {
    return items.reduce((a,b) => a + b[attr],0);
  }
}

在合格的 HTML 中，我希望计算 totalTime 的总和

{{ (delayCount$ | async) | sum:'totalTime'}}

但是我有这个错误：

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'ListCount'.

然后我将参数 attr: string 更改为 attr: keyof ListCount 仍然有这个错误：

error TS2365: Operator '+' cannot be applied to types 'number' and 'string | number'.

和

error TS2532: Object is possibly 'undefined'.

请帮忙

解决方法

我建议如下：

• 限制 attr 指向数字属性
• 考虑到属性可以是可选的。对这些使用零。
• 或者过滤掉缺失（未定义）的值。

export interface ListCount {
  centre?: string;
  cause?: string;
  totalTime?: number;
  otherTime?: number;
}

type NumericKeys<T> = {
    [P in keyof T]: T[P] extends number ? P : never;
}[keyof T];


type NumericListCountKey = NumericKeys<Required<ListCount>>;

class SumPipe  {
  transform(items: ListCount[],attr: NumericListCountKey): number {
    const elemes = items.map(elem => elem[attr]);
    return elemes.reduce((prev: number,currentVal) => prev + (currentVal ? currentVal : 0),0);
  }
}


// alternatively,with filter
class SumPipe2  {
  static isNumber(n: number | undefined): n is number {
    return n != null;
  } 

  transform(items: ListCount[],attr: NumericListCountKey): number {
    const elems = items.map(elem => elem[attr])
                       .filter(SumPipe2.isNumber);
    return elems.reduce((prev: number,currentVal) => prev + currentVal,0);
  }
}

Playground link

,

好的，所以你的代码编译没有问题并且可以工作。 Here 是一个有效的 stackblitz。如果它在您的本地环境中失败，也许尝试检查 TS 版本，尝试重新启动 Angular CLI，查找其他问题或至少提供有关抛出错误的确切行的信息。

不过，您的代码存在一些问题。

• 正如其他人所指出的，将任何 attr 传递到管道并使用括号表示法来获取属性值是没有意义的。只有管​​道接受的对象是 ListCount[]，所以它必须是 totalTime，因为它是唯一的数字属性。如果您制作更通用的管道来接受 any[]，那将是有意义的。

• 您的管道没有针对您的用例进行保护。 totalTime 是一个可选属性，这意味着如果任何项目没有定义 totalTime（它可以，根据您的界面），管道将返回 NaN。不确定这是否是所需的行为。

,

根据this文章，reduce()有一个可选的索引，它指向数组中的当前索引。知道这一点后，我会选择以下解决方案，完全省略 attr。

return items.reduce((a,b,index) => a + b[index].totalTime,0);