Saya menghadapi masalah TypeScript yang rumit.
Andaikan saya mempunyai komponen ikon dengan saiz prop. Saiz boleh menjadi "2", "4", "6". Saya memetakan nilai ini ke kelas tailwind yang telah ditetapkan.
Jadi saya menaip begini
type SizeValues = '2' | '4' | '6'; function Icon({size = '4'}: {size: SizeValues}) { const sizeMap = { '2': 'w-2 h-2', '4': 'w-4 h-4', '6': 'w-6 h-6', }; return <span className={sizeMap[size]}>My icon goes here</span> } <Icon size="sm" />
Semuanya baik-baik saja. Tetapi bagaimana jika saya ingin mempunyai saiz yang berbeza berdasarkan saiz skrin saya? Jadi saya ingin mencuba untuk mempunyai tatabahasa yang baik yang berjalan dengan lancar.
Jadi saya menulis semula komponen Ikon kepada yang berikut:
type SizeValues = ??? function Icon({size = '4'}: {size: SizeValues}) { const sizeMap = { '2': 'w-2 h-2', '4': 'w-4 h-4', '6': 'w-6 h-6', 'md:2': 'md:w-2 md:h-2', 'md:4': 'md:w-4 md:h-4', 'md:6': 'md:w-6 md:h-6', 'lg:2': 'lg:w-2 lg:h-2', 'lg:4': 'lg:w-4 lg:h-4', 'lg:6': 'lg:w-6 lg:h-6', }; return <span className={size.split(' ').map(s => sizeMap[s]).join(' ').trim()}>My icon goes here</span> } <Icon size="2 md:4 lg:6" />
Ini berfungsi dengan baik, tetapi bagaimana saya boleh memasukkannya? Saya membaca bahawa TypeScript akan menyokong ungkapan biasa pada masa hadapan. Ini akan memudahkan urusan, tetapi bolehkah saya menaip ini sekarang?
Ini bukan komponen sebenar, jadi tolong jangan berikan saya cadangan yang baik tentang cara untuk memperbaikinya. Saya hanya tertanya-tanya bagaimana untuk memasukkan atribut saiz saya supaya ia berfungsi seperti yang saya kodkannya.
Pertama, kita perlu mengekstrak
sizeMap
ke dalam skop global dan const menegaskan untuk memberitahu pengkompil mengetahui bahawa ini adalah pemalar tidak berubah dan menyekatnya daripada mengembangkan jenis:Seterusnya, kita perlu mendapatkan jenis kunci
sizeMap
:Pelaksanaan: Kami akan mencipta jenis yang menerima rentetan dan mengembalikannya jika rentetan itu sah, sebaliknya, mengembalikan
never
.Kod pseudo:
Biarkan jenis menerima
T
- 要验证的字符串,Original
- 原始字符串,AlreadyUsed
- penyatuan kunci terpakai.Jika
T
ialah rentetan kosongKembali
Nama Kelas), tidak termasuk原始
Jika tidak, jikaT
以大小映射 (ClassName
) 的键开头,不包括AlreadyUsed
,后跟一个空格和剩余的字符串(休息
bermula dengan kekunci peta saiz (Rest
作为字符串传递以验证Original
,并将AlreadyUsed
Panggil jenis ini secara rekursif, tambahkan
T
是尺寸映射的键,不包括AlreadyUsed
Lain jika- ialah kunci peta saiz, tidak termasuk
-
Jika tidak
原始
Sudah Digunakan从不
KembaliKembali
tidak pernahItem
添加一个通用参数来表示大小
size
在组件中是可选的,因此我们将在SizeValue
周围添加一个包装器,它将把string | undefined
到string
并将其传递给_SizeValue
Kita perlu menambah parameter biasa pada Item untuk mewakilisaiz.
Memandangkan size adalah pilihan dalam komponen, kami akan menambah pembalut di sekeliling SizeValue yang akan menukar
string | undefined kepada 🎜string dan menyerahkannya kepada 🎜_SizeValue , selain itu kami akan menambah nilai lalai untuk saiz: 🎜 🎜Penggunaan: 🎜 🎜🎜Taman permainan🎜🎜