TypeScript中API嵌套JSON响应的类型定义与索引报错解决

问题场景 #

处理API返回的嵌套JSON响应时碰到两个问题：

1. 不知道怎么定义匹配结构的TypeScript类型
2. 使用this.filters[key]时触发TypeScript错误：

Element implicitly has an 'any' type because index expression is not of type 'number'.ts(7015)

API返回的JSON结构示例（存在多层可变键，比如OneType/TwoType、OnePart/SecondPart这类不确定名称的项）：

{
  "OneType": {
    "OnePart": {
      "Values": [
        "codes..",
        "codes..",
        "codes..",
        "codes.."
      ],
      "Values2": [
        "codes..",
        "codes..",
        "codes..",
        "codes.."
      ]
    },
    "SecondPart": {
      "Values": [
        "codes..",
        "codes..",
        "codes..",
        "codes.."
      ],
      "Values2": [
        "codes..",
        "codes..",
        "codes..",
        "codes.."
      ]
    }
  }
}

我尝试定义了以下类型，但键相关的错误还是存在：

type FilterArray = { [key: string]: [] };

解决方案 #

1. 适配嵌套可变结构的类型定义 #

针对多层可变键的结构，用索引类型逐层拆解定义即可：

// 最内层：固定包含Values和Values2的对象
type FilterValues = {
  Values: string[];
  Values2: string[];
};

// 中间层：键为任意字符串（比如OnePart/SecondPart），值为FilterValues
type FilterPart = {
  [key: string]: FilterValues;
};

// 最外层：键为任意字符串（比如OneType/TwoType），值为FilterPart
type FilterResponse = {
  [key: string]: FilterPart;
};

如果Values/Values2的元素不是固定字符串类型，可以把string[]改成Array<string | number>或者泛型，根据实际返回值调整。

2. 修复索引访问的类型错误 #

ts(7015)错误的核心是TypeScript无法确认key属于this.filters的合法键集合，解决方式有三种：

方案A：约束key的类型范围

如果this.filters的类型是FilterResponse，直接把key指定为keyof FilterResponse：

const key: keyof FilterResponse = "OneType";
const targetData = this.filters[key];

方案B：遍历键时用类型断言

如果是遍历对象键的场景，把遍历到的key断言为合法键类型：

Object.keys(this.filters).forEach((key) => {
  const part = this.filters[key as keyof FilterResponse];
  // 后续处理part内的Values/Values2
});

方案C：给this.filters添加明确类型

确保this.filters被标注为FilterResponse，而不是any或宽泛的object：

class YourComponent {
  // 明确标注类型，初始化或从API赋值
  filters: FilterResponse = {};

  handleFilter() {
    const key = "OneType";
    const data = this.filters[key]; // 此时不会触发类型错误
  }
}

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