如何为API返回的JSON响应定义TypeScript接口？

首先得先修正一下你提供的JSON语法（标准JSON要求键名加引号，数组内的对象要包裹在{}里），正确的结构应该是这样的：

{
  "key1": [
    {
      "name": "bob",
      "gender": "male",
      "children": [
        { "name": "tom", "gender": "male" },
        { "name": "charley", "gender": "male" }
      ]
    }
  ],
  "key2": {
    "bob": 45,
    "tom": 15,
    "charley": 10
  }
}

你之前遇到的'key1' doesn't exist on type any[]错误，核心原因是你把personData错误声明成了数组类型any[]，但API实际返回的是一个包含key1和key2的对象。接下来我们一步步创建对应的TypeScript接口，彻底解决这个问题：

1. 从最底层的嵌套对象开始定义接口 #

先处理孩子的结构：

// 孩子的接口
interface PersonChild {
  name: string;
  gender: string;
}

2. 定义包含孩子的成人对象接口 #

接下来是key1数组里的每一个成人对象：

// 成人（包含孩子列表）的接口
interface Person {
  name: string;
  gender: string;
  children: PersonChild[];
}

3. 定义顶层API响应的接口 #

最后是整个API返回的对象，它包含key1（Person数组）和key2（年龄映射）：
这里有两种方式定义key2：

• 如果人名是固定的，可以直接枚举：

interface PersonAgeMap {
  bob: number;
  tom: number;
  charley: number;
}

interface PersonApiResponse {
  key1: Person[];
  key2: PersonAgeMap;
}

• 如果人名可能动态变化，用Record<string, number>更灵活：

interface PersonApiResponse {
  key1: Person[];
  key2: Record<string, number>; // 表示键是字符串，值是数字的对象
}

4. 修改Component里的类型声明 #

把原来的any[]替换成我们定义的PersonApiResponse，同时修正相关变量的类型：

export class PersonComponent implements OnInit {
  personData: PersonApiResponse; // 改为正确的顶层接口类型
  personObject: Person[]; // key1是Person数组，所以这里声明为Person[]
  errorMessage: string;

  constructor(private _personService: PersonService) {}

  ngOnInit() {
    this._personService.getPersonData().subscribe(
      personData => {
        this.personData = personData;
      },
      error => {
        this.errorMessage = error as string;
      },
      () => {
        this.personObject = this.personData.key1; // 现在不会再报错了！
      }
    );
  }
}

这样修改后，TypeScript就能正确识别personData的结构，不仅不会报错，还能给你代码补全和类型检查的提示，比用any靠谱多了～

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