Angular开发遇TS2339报错：类型'any[]'不存在属性'data'

问题场景 #

创建模拟服务返回测试数据，在组件ts文件中调用该服务时触发类型报错，查阅多篇同类错误相关帖子后，仍未找到适配当前场景的修正方案。

具体报错信息 #

Error: src/app/roaster-load/file-load-init/file-load-init.component.ts:60:19 - error TS2339: Property 'data' does not exist on type 'any[]'.

涉及代码 #

file-load-init.component.ts 核心片段 #

private GetSOEIDVerifyData(){  
  this.UploadService.UploadDataReturn()
   .subscribe((res: any[]) => {
        console.log(res);
        if (res.data) {
          this.InvalidSOEIDCount = res.data
        }  
      }
   )}

upload.service.ts 核心片段 #

UploadDataReturn(): Observable<InvalidSOEIDModel[]> {
return of (  [
    {
      SOEID: "AAAAA"
    },
    {
      SOEID: "BBBBB"
    }])
}

报错根因 #

• 前后数据结构不匹配：服务层Mock方法直接返回InvalidSOEIDModel类型的裸数组，没有外层包裹data字段；但组件层默认按照{ data: 数组 }的接口结构取数，访问了数组上不存在的data属性
• 类型标注不严谨：subscribe回调里把返回值标注为any[]数组类型，TS静态检查时能直接识别到数组不存在data属性，直接抛出类型错误。

修正方案 #

根据你后续对接真实接口的返回结构，二选一即可：

方案1：适配当前Mock的裸数组返回结构 #

直接修改组件取数逻辑，去掉.data层级访问，同时把返回值类型标注为和服务一致的InvalidSOEIDModel[]，修改后的GetSOEIDVerifyData方法如下：

private GetSOEIDVerifyData(){  
  this.UploadService.UploadDataReturn()
  .subscribe((res: InvalidSOEIDModel[]) => {
    console.log(res);
    this.InvalidSOEIDCount = res;
  })
}

方案2：对齐后续真实接口的{data: 数组}返回结构 #

修改服务层Mock返回值，增加外层data包裹，同时调整方法的返回类型定义，修改后的UploadDataReturn方法如下：

UploadDataReturn(): Observable<{data: InvalidSOEIDModel[]}> {
  return of({
    data: [
      {SOEID: "AAAAA"},
      {SOEID: "BBBBB"}
    ]
  })
}

修改后组件层原有res.data的访问逻辑完全匹配类型，不会再触发报错。

额外优化建议 #

• 组件中声明的InvalidSOEIDModel:InvalidSOEIDModel[]属性未被使用，且和导入的模型类重名，容易引发命名冲突，无用可直接删除；如果需要使用建议重命名为invalidSOEIDList这类语义化的小驼峰名称
• Angular编码规范要求服务注入使用小驼峰命名，构造函数中private UploadService: UploadService建议修改为private uploadService: UploadService，避免和服务类名混淆。

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