Verwenden einer Eigenschaft in der Schnittstelle als Array-Länge einer anderen Eigenschaft in derselben Schnittstelle

Question

Ich habe eine Schnittstelle, die als Requisiten für einige Komponenten verwendet wird, um verschiedene Geräte anzuzeigen. Jedes Gerät wird auf einer Karte in einer Rasterspalte platziert.

Dies ist die Schnittstelle:

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

Angesichts der Attributspalten möchte ich die Größe des Arrays products，productImages和productReferals durch die Attributspalten begrenzen, da ihre Verwendung mit der Anzahl der Spalten zusammenhängt.

Der naheliegendste erste Versuch besteht darin, die Attributspalten direkt an das Array zu übergeben, etwa so:

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

Die Antwort lautet jedoch:

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

Gibt es eine einfachere Möglichkeit, dies zu erreichen, ohne eine doppelte Schnittstelle zu erstellen und Eigenschaften an die neue Schnittstelle zu übergeben?

Answer 1

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

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