React TypeScript：如何为带键数组的对象的对象定义类型（无需逐个命名键）

先定义单个团队的类型：

interface Team {
  name: string;
  description: string;
}

要实现你需要的结构，最简单的方式是用索引签名结合显式声明的keys属性，但直接写索引签名有个小坑：TypeScript会把keys也当成Team类型的属性，所以更稳妥的是用Record工具类型加交叉类型：

type Teams = Record<string, Team> & {
  keys: string[];
};

这样定义后，就能按你给的示例正常使用了：

const teams: Teams = {
  team1: {
    name: 'team1',
    description: 'yada yada'
  },
  team2: {
    name: 'team2',
    description: 'yada yada'
  },
  keys: ['team1', 'team2']
};

// 遍历的时候不会有类型报错
teams.keys.forEach(key => {
  console.log(teams[key].name);
});

如果想要更严格的类型检查——比如确保keys数组里的每个元素都是对象里实际存在的键，可以用泛型来约束：

type Teams<T extends string> = Record<T, Team> & {
  keys: T[];
};

// 使用时指定具体的键联合类型
const teams: Teams<'team1' | 'team2'> = {
  team1: { name: 'team1', description: 'yada yada' },
  team2: { name: 'team2', description: 'yada yada' },
  keys: ['team1', 'team2']
};

这种情况下，要是你在keys里写了个不存在的键，TypeScript会直接给你报错，类型约束更严谨。

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