在同一接口中，将接口中的一个属性用作另一个属性的数组长度

Question

我有一个接口，它将作为部分组件的props，用于显示不同的设备。每个设备都将放置在一个网格列中的卡片上。

这是接口：

interface EquipmentSectionProps {
  bgColor: "black" | "lightGrey";
  columns: number;
  category: string;
  products: string[];
  productImages: string[];
  productReferals: string[];
}

给定属性columns，我想通过属性columns限制数组products，productImages和productReferals的大小，因为它们的使用与列数相关。

显而易见的第一种尝试是直接将属性columns传递到数组中，像这样：

interface EquipmentSectionProps {
  bgColor: "black" | "lightGrey";
  columns: number;
  category: string;
  products: string[columns];
  productImages: string[columns];
  productReferals: string[columns];
}

然而，响应返回：

Cannot find name 'columns'.ts(2304) type columns = /*unresolved*/ any

有没有更简单的方法可以实现这一点，而不需要创建一个重复的接口并将属性传递给新接口？

Answer 1

很遗憾，你无法通过TypeScript类型（例如你展示的接口声明）来限制数组的长度。你需要在组件的代码中编写长度检查。

尽管在javascript中有一种用特定长度初始化数组的方法，但是javascript本身没有强制执行可使长度不可变的机制。没有任何东西可以阻止数组的长度增加，这意味着你需要根据需要显式地检查长度。