TypeScript接口中如何用columns属性限制数组长度？

你遇到的问题是因为columns是接口的运行时属性，不是TypeScript类型系统中的可引用变量，所以无法直接用string[columns]定义数组长度。要实现数组长度与columns值的绑定，无需重复定义接口的话，可以用泛型接口来约束：

interface EquipmentSectionProps<T extends number> {
  columns: T;
  // 强制数组长度等于泛型T（即columns的数值）
  products: string[] & { length: T };
  productImages: string[] & { length: T };
  productReferals: string[] & { length: T };
}

原理说明 #

• 泛型T被约束为number类型，用来指代columns的具体数值
• 通过& { length: T }给数组类型添加长度约束，确保数组元素个数严格等于columns的值

使用示例 #

// 合法：所有数组长度与columns一致
const validDemo: EquipmentSectionProps<3> = {
  columns: 3,
  products: ["设备A", "设备B", "设备C"],
  productImages: ["img-a.png", "img-b.png", "img-c.png"],
  productReferals: ["ref-a", "ref-b", "ref-c"]
};

// 非法：products长度不等于3，TypeScript会直接报错
const invalidDemo: EquipmentSectionProps<3> = {
  columns: 3,
  products: ["设备A", "设备B"], // 此处报错：类型长度"2"不能赋值给类型"3"
  productImages: ["img-a.png", "img-b.png", "img-c.png"],
  productReferals: ["ref-a", "ref-b", "ref-c"]
};

简化泛型推断（可选） #

如果不想手动指定泛型参数，可以封装一个工厂函数让TypeScript自动推断T的值：

function createEquipmentProps<T extends number>(props: EquipmentSectionProps<T>) {
  return props;
}

// 自动推断columns为3，无需手动传入泛型参数
const autoInferredProps = createEquipmentProps({
  columns: 3,
  products: ["设备A", "设备B", "设备C"],
  productImages: ["img-a.png", "img-b.png", "img-c.png"],
  productReferals: ["ref-a", "ref-b", "ref-c"]
});

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