如何定义随列数动态扩展属性的TypeScript Input接口？

要实现paddings属性根据列数动态扩展的需求，你可以利用TypeScript的模板字面量类型和映射类型来完成，以下分两种常见场景给出具体实现：

场景1：固定列数（比如已知是1列） #

如果列数固定，直接通过模板字面量定义对应属性即可：

// 定义1列对应的paddings类型
type SingleColumnPaddings = {
  'pL-0': string;
  'pR-0': string;
};

// 最终的Input接口
interface Input {
  paddings: SingleColumnPaddings;
}

// 使用示例
const input: Input = {
  paddings: {
    'pL-0': '12px',
    'pR-0': '12px'
  }
};

场景2：支持任意动态列数 #

如果需要适配任意列数（比如2列、3列甚至更多），可以通过泛型结合自定义数字范围类型实现：

// 生成从0到N-1的数字字面量集合（TS 4.5+版本支持）
type NumberRange<N extends number, Acc extends number[] = []> = 
  Acc['length'] extends N ? Acc[number] : NumberRange<N, [...Acc, Acc['length']]>;

// 动态生成对应列数的paddings类型
type ColumnPaddings<N extends number> = {
  [Key in `pL-${NumberRange<N>}`]: string;
} & {
  [Key in `pR-${NumberRange<N>}`]: string;
};

// 带列数泛型的Input接口
interface Input<ColumnCount extends number> {
  paddings: ColumnPaddings<ColumnCount>;
}

// 使用示例：3列的情况
const threeColInput: Input<3> = {
  paddings: {
    'pL-0': '8px',
    'pR-0': '8px',
    'pL-1': '8px',
    'pR-1': '8px',
    'pL-2': '8px',
    'pR-2': '8px'
  }
};

核心原理说明 #

• 模板字面量类型：自动生成pL-0、pR-1这类符合命名规则的动态属性名。
• 映射类型：遍历生成的列索引集合，为每个索引创建对应的左右padding属性。
• NumberRange类型：解决TypeScript无法直接生成连续数字范围的问题，让你可以指定任意正整数作为列数。

这种定义方式能在编译阶段严格约束paddings的属性结构，保证代码的类型安全性。

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