Angular服务新增soeid字段报TS2322类型不匹配错误

报错核心原因 #

类型声明和实际返回值结构完全不匹配，具体有两层问题：

1. 方法声明返回值为Observable<InvalidSOEIDModel[]>，即流中返回的是InvalidSOEIDModel类型的数组，但你在of()中传入的是单个普通对象，普通对象不具备数组原型上的length/pop/push/concat等内置属性和方法，因此TS抛出类型缺失错误。
2. 你当前构造的模拟数据结构{ soeid: {SOEID: string}[] }，实际是单个InvalidSOEIDModel类型的对象，并非该类型对象组成的数组。

修复方案 #

根据实际业务接口的返回结构二选一即可：

方案1：接口返回单个带soeid列表的对象（和你当前模拟数据结构一致） #

直接修改方法的返回类型声明，去掉数组标记，代码如下：

// upload.service.ts 对应方法
UploadDataReturn(): Observable<InvalidSOEIDModel> {
  return of({
    soeid: [
      {
        SOEID: "AAAAA"
      },
      {
        SOEID: "BBBBB"
      }
    ]
  });
}

方案2：接口确实返回InvalidSOEIDModel类型的数组 #

修改of()中的模拟数据结构，把数据调整为符合类型要求的数组格式，代码如下：

// upload.service.ts 对应方法
UploadDataReturn(): Observable<InvalidSOEIDModel[]> {
  return of([
    {
      soeid: [{ SOEID: "AAAAA" }]
    },
    {
      soeid: [{ SOEID: "BBBBB" }]
    }
  ]);
}

补充提示：如果只是做数据结构的类型约束，优先用interface替代class做类型标注，更符合TS的常规使用习惯，也不需要处理类实例化的相关问题。

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