TypeScript索引签名适配复杂数据类型的React表格问题

要解决IDisplayData的类型冲突，核心思路是让索引签名的键范围不包含type属性，同时保留批量定义100个周期列的能力。具体可以通过映射类型+数字枚举生成来实现，既精确限制周期键的范围，又避免与type属性冲突。

步骤1：生成1-100的周期键联合类型 #

先通过递归类型自动生成1到100的数字联合，再转成字符串类型，避免手动写100个键：

// 递归生成0到N-1的数字联合，调整后得到1-100
type Enumerate<N extends number, Acc extends number[] = []> = Acc['length'] extends N
  ? Acc[number]
  : Enumerate<N, [...Acc, Acc['length']]>;

// 生成1-100的数字类型
type PeriodNumbers = Exclude<Enumerate<101>, 0>;
// 转成字符串类型（如'1'、'2'...'100'）
type PeriodKeys = `${PeriodNumbers}`;

步骤2：重新定义IDisplayData #

用交叉类型结合映射类型，将type属性与批量周期列分开定义，两者键范围不重叠，自然避免冲突：

interface INewDataToDisplay {
  amount: number;
  otherDataOfInterest1: number;
  otherDataOfInterest2: number;
}

export type IDisplayData = {
  type: string;
} & { [K in PeriodKeys]: INewDataToDisplay };

为什么这个方案可行？ #

原来的冲突根源是：接口的索引签名（如[period: string]: INewDataToDisplay）会强制所有字符串键的属性都必须匹配该类型，但type是string类型，与INewDataToDisplay不兼容。

而新方案中，映射类型{ [K in PeriodKeys]: INewDataToDisplay }的键仅为'1'到'100'，完全不包含'type'，因此和单独定义的type: string交叉后，既保留了批量定义周期列的能力，又不会出现类型冲突。

可选：简化版（不严格限制周期范围） #

如果不需要严格限定周期必须是1-100，只是要排除type键，也可以用更简洁的写法：

export type IDisplayData = {
  type: string;
} & { [K in string as Exclude<K, 'type'>]: INewDataToDisplay };

这个写法通过Exclude从所有字符串键中排除'type'，确保索引签名仅作用于非type的键，同样解决冲突。

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