在同一介面中，將介面中的一個屬性用作另一個屬性的陣列長度

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本身沒有強制執行可使長度不可變的機制。沒有任何東西可以阻止數組的長度增加，這意味著你需要根據需要明確地檢查長度。