TypeScript中如何为多层嵌套对象定义Interface接口

你提供的原始JSON存在语法错误：数组内两个对象元素间缺少逗号、末尾多了一个冗余闭合花括号，修正后的合法JSON结构如下：

{
  "state_1": {
    "date": [
      {
        "1000": {
          "size": 3,
          "count": 0
        }
      },
      {
        "1001": {
          "size": 3,
          "count": 1
        }
      }
    ]
  }
}

注意：JSON标准不支持数字作为键名，所有键会被自动序列化为字符串，TypeScript中支持数字索引签名的写法，会自动完成数字到字符串的类型映射。

接口定义代码 #

// 单个id对应的size、count字段结构
interface IdValue {
  size: number;
  count: number;
}

// date数组的单个元素：以id为键，值为IdValue类型的对象
type DateArrayItem = Record<string, IdValue>;
// 如果id是固定枚举值，可以替换为字面量类型获得更严格校验，例：
// type DateArrayItem = Partial<Record<1000 | 1001, IdValue>>;

// state节点结构，包含date属性
interface StateData {
  date: DateArrayItem[];
}

// 最外层Example接口
interface Example {
  // 支持state_前缀加数字的任意键名，如果是固定state_1可直接写 "state_1": StateData
  [stateKey: `state_${number}`]: StateData;
}

自定义调整说明 #

• 若外层state键名固定（比如仅存在state_1），可将最外层索引签名替换为固定键声明，类型校验精度更高
• 若id取值为固定枚举，可替换DateArrayItem为字面量联合类型的Record结构，避免传入非法id
• 若需要兼容JS中数字键的写法，直接将索引签名的键类型改为number即可，TS会自动处理映射关系

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