React中如何为含动态键的JSON定义TypeScript类型？

首先定义数组内单个键值对的类型：

type KeyValuePair = {
  key: string;
  value: string;
};

接着定义外层的动态键对象类型——因为你的JSON键是动态字符串，所以用字符串索引签名来匹配任意键名，每个键对应KeyValuePair类型的数组：

type DynamicKeyValueMap = {
  [key: string]: KeyValuePair[];
};

在React中的使用示例 #

你可以直接用这个类型声明数据变量，或者作为组件的Props类型：

// 声明符合结构的数据
const jsonData: DynamicKeyValueMap = {
  "abc": [
    {"key": "a", "value": "a"},
    {"key": "b", "value": "b"},
    {"key": "c", "value": "c"}
  ],
  "cdf": [
    {"key": "a", "value": "a"},
    {"key": "b", "value": "b"},
    {"key": "c", "value": "c"}
  ]
};

// 作为组件Props类型
type DataComponentProps = {
  data: DynamicKeyValueMap;
};

const DataComponent = ({ data }: DataComponentProps) => {
  // 遍历数据进行渲染
  return (
    <div>
      {Object.entries(data).map(([groupKey, items]) => (
        <div key={groupKey}>
          <h3>{groupKey}</h3>
          {items.map(item => (
            <div key={item.key}>{`${item.key}: ${item.value}`}</div>
          ))}
        </div>
      ))}
    </div>
  );
};

补充：如果键有固定可选范围 #

如果后续你的动态键其实是有限的已知值（比如只有abc、cdf这类固定键），可以改用映射类型来约束键名：

// 定义所有可能的键名
type AllowedGroupKeys = "abc" | "cdf" | "xyz";

type FixedKeyValueMap = {
  [key in AllowedGroupKeys]: KeyValuePair[];
};

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