Menggunakan satu sifat dalam antara muka sebagai panjang tatasusunan sifat lain dalam antara muka yang sama

Question

Saya mempunyai antara muka yang akan digunakan sebagai prop untuk beberapa komponen untuk memaparkan peranti yang berbeza. Setiap peranti akan diletakkan pada kad dalam lajur grid.

Ini ialah antara muka:

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

Memandangkan lajur atribut, saya ingin mengehadkan saiz tatasusunan products，productImages和productReferals mengikut lajur atribut, kerana penggunaannya berkaitan dengan bilangan lajur.

Percubaan pertama yang jelas ialah menghantar lajur atribut terus ke dalam tatasusunan, seperti ini:

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

Namun, maklum balas kembali:

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

Adakah terdapat cara yang lebih mudah untuk mencapai ini tanpa membuat antara muka pendua dan menghantar sifat kepada antara muka baharu?

Answer 1

Malangnya, anda tidak boleh mengehadkan panjang tatasusunan melalui jenis TypeScript (seperti pengisytiharan antara muka yang anda tunjukkan). Anda perlu menulis semakan panjang dalam kod komponen.

Walaupun terdapat cara dalam javascript untuk memulakan tatasusunan dengan panjang tertentu, javascript itu sendiri tidak mempunyai mekanisme untuk menguatkuasakan panjang yang tidak berubah. Tiada apa-apa untuk menghalang panjang tatasusunan daripada meningkat, yang bermaksud anda perlu menyemak panjang secara eksplisit mengikut keperluan.