如何基于对象真实键优化TypeScript类型数组创建并减少重复？

要避免重复定义AvailableComponents类型，你可以基于sectionTypes的键动态生成该类型，无需手动列出每个组件。

方案1：生成联合类型（推荐） #

如果AvailableComponents只需表示所有可能的UseComponent类型（不要求固定顺序或元组结构），直接利用keyof操作符即可：

const sectionTypes = {
  comp1: Comp1,
  comp2: Comp2,
} as const;

// 提取sectionTypes的键类型
type SectionKeys = keyof typeof sectionTypes;

// 动态生成AvailableComponents联合类型
type AvailableComponents = UseComponent<SectionKeys>;

这个类型等价于UseComponent<'comp1'> | UseComponent<'comp2'>，涵盖了所有可能的组件类型，后续新增组件时只需修改sectionTypes，无需更新AvailableComponents。

方案2：生成元组类型（保留固定顺序） #

如果必须保持原有的元组结构（固定顺序和长度），可以通过常量元组映射实现：

const sectionTypes = {
  comp1: Comp1,
  comp2: Comp2,
} as const;

// 定义与sectionTypes键顺序一致的常量元组
const sectionKeys = ['comp1', 'comp2'] as const;

// 映射元组类型生成目标元组
type AvailableComponents = {
  [Index in keyof typeof sectionKeys]: UseComponent<typeof sectionKeys[Index]>;
};

此时AvailableComponents的类型与原代码完全一致：[UseComponent<'comp1'>, UseComponent<'comp2'>]。后续新增组件时，只需在sectionTypes和sectionKeys中各添加一次即可，避免了重复定义UseComponent。

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