如何为键名动态变化的JSON编写对应的TypeScript接口定义？

完全可以实现，TypeScript提供了索引签名、Record工具类型等能力专门处理这类键名不固定的场景，具体实现步骤如下：

第一步：定义固定结构的子类型 #

你给出的JSON中，所有动态键对应的取值结构是完全一致的，先把这部分公共结构抽出来定义：

// 定义选项条目类型
interface FilterOption {
  label: string;
  value: string;
}

// 定义过滤器配置的统一结构
interface FilterConfig {
  label: string;
  options: FilterOption[];
}

第二步：定义带动态键的外层类型 #

根据你的实际场景选对应写法即可：

• 场景1：键名是任意字符串，没有固定规则
  可以用索引签名或者更简洁的Record工具类型：

  // 写法1：索引签名
  interface FilterMap {
    [key: string]: FilterConfig
  }
  
  // 写法2：Record工具类型（更推荐）
  type FilterMap = Record<string, FilterConfig>
  

• 场景2：键名有固定命名规则，比如必须以Filter为后缀
  可以结合模板字面量类型做更严格的约束：

  type FilterMap = Record<`${string}Filter`, FilterConfig>
  

• 场景3：提前知道所有可能的键名取值
  可以把允许的键名定义为联合类型，进一步提升类型安全性：

  // 仅允许userFilter、activityFilter两个键
  type AllowedFilterKeys = 'userFilter' | 'activityFilter'
  type FilterMap = Record<AllowedFilterKeys, FilterConfig>
  

验证示例 #

把你给出的JSON赋值给上述FilterMap类型的变量，TypeScript会完全兼容，不会报错：

const myFilters: FilterMap = {
  "userFilter": {
    "label": "Users",
    "options": [
      { "label": "Admin", "value": "ADMIN" },
      { "label": "Viewer", "value": "VIEWER" }
    ]
  },
  "activityFilter": {
    "label": "Activity",
    "options": [
      { "label": "Active", "value": "ACTIVE" },
      { "label": "Inactive", "value": "INACTIVE" }
    ]
  }
}

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