如何在TypeScript中限制数组元素仅拥有另一数组共享的ID？

需求是构建带有索引签名的对象ColumnAndColumnSettings，要求每个配置项里的columnSettings数组中，所有对象的colId必须存在于同配置项columns数组的元素中。当前的类型定义无法实现这个约束，导致不匹配的colId不会触发TypeScript报错。

解决方案：通过泛型关联列ID的约束 #

我们可以利用TypeScript的泛型和类型推导，让每个配置项的columnSettings的colId严格对应同配置项columns里的colId：

type Column = {
  colId: string;
  width?: number;
  sort?: number;
  something?: string;
};

// 让ColumnSetting的colId可以绑定到特定的字符串类型
type ColumnSetting<ColId extends string> = Pick<Column, 'colId' | 'width' | 'sort'> & {
  colId: ColId;
};

// 定义单个表格配置的泛型类型，关联columns和columnSettings的colId
type TableConfig<ColIds extends string> = {
  columns: Array<Column & { colId: ColIds }>;
  columnSettings: Array<ColumnSetting<ColIds>>;
};

// 辅助函数，用于自动推导每个配置项的列ID联合类型
function createColumnConfigs<T extends { [key: string]: TableConfig<string> }>(configs: T): T {
  return configs;
}

const columnExample = { colId: '1', something: 'test' } as const;
const columnSettingExample1 = { colId: '1' } as const;
const columnSettingExample2 = { colId: '2' } as const;

// 现在会正确触发报错：boats的columnSettings里包含colId=2，但columns里没有对应的列
export const ColumnAndColumnSettings = createColumnConfigs({
  people: { columns: [columnExample], columnSettings: [columnSettingExample1] }, // 正常
  boats: { columns: [columnExample], columnSettings: [columnSettingExample1, columnSettingExample2] }, // 报错：类型"{ colId: "2"; }"的colId属性不能赋值给类型"1"
});

关键说明： #

• 使用as const断言，让TypeScript推导出columnExample等变量的具体字符串字面量类型（而非宽泛的string），确保能精准约束colId的取值。
• 泛型TableConfig<ColIds>将columns和columnSettings的colId绑定到同一个联合类型ColIds上，强制两者的ID一致。
• 辅助函数createColumnConfigs帮助TypeScript自动推导每个配置项的ColIds类型，无需手动指定泛型参数。

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