TypeScript数组含不同对象的类型声明报错TS1131及重复标识符问题

你的核心问题是arr_3数组包含两种完全不同结构的对象，直接在数组里写两个对象类型会触发语法错误，正确的做法是用联合类型来定义数组元素。

第一步：修正API返回的JSON（原示例存在语法错误，比如缺逗号、重复键，修正后如下） #

{
  "label_1": {
    "arr_1": [{"key": "value"}],
    "arr_2": [
      {
        "key": "value",
        "arr_3": [
          {
            "key": "value",
            "label_2": {
              "key": "value",
              "arr_4": [{"key": "value", "arr_5": [{"key": "value"}]}],
              "arr_6": [
                {
                  "key": "value",
                  "label_3": {
                    "key": "value",
                    "label_4": {"key": "value"}
                  }
                }
              ]
            }
          },
          {
            "key_x": "value_x",
            "label_x_1": {
              "label_x_2": {
                "key_x": "value_x",
                "arr_x_1": [{"key_x": "value_x", "label_x": {"key_x": "value_x"}}]
              }
            }
          }
        ]
      }
    ]
  }
}

第二步：用联合类型定义数组元素类型 #

把arr_3的两个元素类型单独抽离成接口，再用|组合成联合类型作为数组的元素类型，完整类型声明如下：

// 定义arr_3的第一个元素类型
interface Arr3ItemType1 {
  key: string;
  label_2: {
    key: string;
    arr_4: {
      key: string;
      arr_5: { key: string }[];
    }[];
    arr_6: {
      key: string;
      label_3: {
        key: string;
        label_4: { key: string };
      };
    }[];
  };
}

// 定义arr_3的第二个元素类型
interface Arr3ItemType2 {
  key_x: string;
  label_x_1: {
    label_x_2: {
      key_x: string;
      arr_x_1: {
        key_x: string;
        label_x: { key_x: string };
      }[];
    };
  };
}

// 完整的顶层数据类型
interface ApiResponseData {
  label_1: {
    arr_1: { key: string }[];
    arr_2: {
      key: string;
      arr_3: (Arr3ItemType1 | Arr3ItemType2)[]; // 这里使用联合类型
    }[];
  };
}

第三步：访问数组元素时的类型处理 #

因为数组元素是联合类型，直接访问某个专属属性（比如key_x）会报错，需要用类型守卫告诉TypeScript当前元素的具体类型：

const data: ApiResponseData = /* 你的API返回数据 */;

// 遍历arr_3数组
data.label_1.arr_2[0].arr_3.forEach(item => {
  // 用in判断属性是否存在，实现类型守卫
  if ('label_2' in item) {
    // 此处item被推断为Arr3ItemType1
    console.log(item.label_2.key);
  } else if ('label_x_1' in item) {
    // 此处item被推断为Arr3ItemType2
    console.log(item.label_x_1.label_x_2.key_x);
  }
});

为什么之前的写法报错？ #

你之前试图在数组类型里直接写两个对象字面量类型，这不符合TypeScript语法规则——数组类型需要明确元素的类型，而非直接罗列元素。另外重复标识符错误是因为重复定义了同名类型，抽离成独立接口就能避免这个问题。

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