Utiliser une propriété dans l'interface comme longueur de tableau d'une autre propriété dans la même interface

Question

J'ai une interface qui sera utilisée comme accessoire pour certains composants afin d'afficher différents appareils. Chaque appareil sera placé sur une carte dans une colonne de grille.

Voici l'interface :

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

Étant donné les colonnes d'attributs, je souhaite limiter la taille du tableau products，productImages和productReferals par les colonnes d'attributs, puisque leur utilisation est liée au nombre de colonnes.

La première tentative évidente consiste à transmettre les colonnes d'attributs directement dans le tableau, comme ceci :

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

Cependant, la réponse revient :

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

Existe-t-il un moyen plus simple d'y parvenir sans créer une interface en double et sans transmettre de propriétés à la nouvelle interface ?

Answer 1

Malheureusement, vous ne pouvez pas limiter la longueur d'un tableau via des types TypeScript (comme la déclaration d'interface que vous avez montrée). Vous devez écrire la vérification de longueur dans le code du composant.

Bien qu'il existe un moyen en javascript d'initialiser un tableau avec une longueur spécifique, javascript lui-même n'a aucun mécanisme pour imposer une longueur immuable. Rien n'empêche la longueur d'un tableau d'augmenter, ce qui signifie que vous devez vérifier explicitement la longueur si nécessaire.