Angular 8升级至9后出现key参数类型不兼容错误求助

报错信息 #

Argument of type '(value: any[], key: number) => void' is not assignable to parameter of type 'CollectionIterator<any[], void, Dictionary<any[]>>'.
Types of parameters 'key' and 'key' are incompatible.
Type 'string' is not assignable to type 'number'.ts(2345)

问题根源 #

Angular升级后，依赖的Lodash类型定义变得更严格：groupBy方法返回的对象键默认是字符串类型，但代码中给each回调的key参数声明了number类型，导致类型不匹配。

修复方案 #

方案1：将字符串键转为数字后使用 #

如果ErrorCode本身是数字类型，把each回调中的key转为数字再做判断：

GetMessageFailedDashboard(): Observable<MessageFailedDashboardModel[]> {
    return Observable.create(observer => {
      this.messageSvc.getAll('GetMessageFailedDashboard', (resp: any) => {
        let result: MessageFailedDashboardModel[] = [];
        _.chain(resp)
          .groupBy(function (member) {
            return member.ErrorCode;
          })
          .each(function (value, key) {
            const numKey = Number(key); // 转换为数字类型
            let item = new MessageFailedDashboardModel();
            item.IsShowDetail = false;
            if (numKey === 1) {
              item.ErrorDescription = `Email and/or Phone number are missing in ${value.length} Personnel(s).`;
              item.PersonnelName = value.map(v => v.PersonnelName);
            }
            else {
              item.ErrorDescription = `${value.length} error(s) when transmission in database.`;
            }
            result.push(item);
          }).value();

        observer.next(result);
        observer.complete();
      }, (error: any) => {
        observer.error(error);
        observer.complete();
      });
    });
  }

方案2：调整键的类型声明为字符串 #

直接把key的类型改为string，并使用字符串值进行判断：

GetMessageFailedDashboard(): Observable<MessageFailedDashboardModel[]> {
    return Observable.create(observer => {
      this.messageSvc.getAll('GetMessageFailedDashboard', (resp: any) => {
        let result: MessageFailedDashboardModel[] = [];
        _.chain(resp)
          .groupBy(function (member) {
            return member.ErrorCode;
          })
          .each(function (value, key: string) { // 修改类型为string
            let item = new MessageFailedDashboardModel();
            item.IsShowDetail = false;
            if (key === '1') { // 匹配字符串'1'
              item.ErrorDescription = `Email and/or Phone number are missing in ${value.length} Personnel(s).`;
              item.PersonnelName = value.map(v => v.PersonnelName);
            }
            else {
              item.ErrorDescription = `${value.length} error(s) when transmission in database.`;
            }
            result.push(item);
          }).value();

        observer.next(result);
        observer.complete();
      }, (error: any) => {
        observer.error(error);
        observer.complete();
      });
    });
  }

补充说明 #

Lodash的groupBy方法无论传入的分组键是数字还是其他类型，最终都会将键转为字符串存储在返回的对象中，因此不要依赖键的原始类型，显式处理类型转换或匹配是最稳妥的方式。

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