TypeScript后端数据对象处理问题：无法访问数据与提取字段

首先你的类类型定义完全错配了，这是导致data显示undefined的核心原因，同时你还搞反了部分字段的类型，下面一步步修正：

1. 修正类的类型定义 #

后端返回的是单个对象，对象的键（比如"A"）对应的值是对象数组，而且字段类型要和后端数据严格匹配：fieldA是数字、fieldB是字符串、fieldC是数字、fieldD是数字。正确的类定义如下：

export class SomeDataFromBackend {
  // 类型匹配后端结构：单个对象，键对应对象数组
  public data: {
    [key: string]: Array<{
      fieldA: number;
      fieldB: string;
      fieldC: number;
      fieldD: number;
    }>;
  };

  constructor(data: typeof SomeDataFromBackend.prototype.data) {
    this.data = data;
  }
}

2. 正确实例化类 #

假设backendResponse是你从后端拿到的完整数据，直接传入构造函数即可：

// 模拟后端返回的数据
const backendResponse = {
  "A": [
    { "fieldA": 0, "fieldB": "A", "fieldC": 123, "fieldD": 0 },
    { "fieldA": 0, "fieldB": "A", "fieldC": 111, "fieldD": 0 }
  ]
};

const someDataFB = new SomeDataFromBackend(backendResponse);
console.log(someDataFB.data); // 现在会正确输出后端数据

3. 数据访问示例 #

提取"A"数组中第二个元素的fieldC #

数组下标从0开始，第二个元素的下标是1：

const secondFieldC = someDataFB.data["A"][1].fieldC;
console.log(secondFieldC); // 输出 111

生成包含所有fieldC值的新数组 #

• 如果只需要"A"数组里的所有fieldC：

const aFieldCList = someDataFB.data["A"].map(item => item.fieldC);
console.log(aFieldCList); // 输出 [123, 111]

• 如果要提取所有键（比如还有"B"、"C"等）对应的数组里的fieldC：

const allFieldC = Object.values(someDataFB.data).flatMap(arr => arr.map(item => item.fieldC));
console.log(allFieldC); // 输出 [123, 111, ...其他键下的fieldC值]

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