Meningkatkan Gandingan dalam Projek anda

Hei semua! Siaran ini bertujuan untuk membantu anda memperbaik cara jenis data projek anda disambungkan, menjadikannya lebih dipercayai dan lebih mudah difahami.

TLDR untuk anda yang tergesa-gesa: elakkan mengulangi jenis dan kontras yang merujuk kepada perkara yang sama dan cuba berikan mereka nama yang tidak senonoh (walaupun ia adalah rentetan atau nombor mudah). Ini akan memudahkan anda mengenal pasti, mengubah suai atau mengalih keluar kod anda kemudian.

---

Masalahnya

Bayangkan anda sedang membangunkan tapak web e-dagang, dan anda telah menentukan jenis produk sebagai:

export type ProductType = {
  id: string;
  name: string;
  price: number;
};

Pada projek seperti ini, anda boleh mencari pelbagai cara dengan mudah untuk merujuk kepada id produk, daripada fungsi mudah:

• const getProductById = (produk: ProductType[], id: string) => {...};
• const onProductPress = (productId: string) => {...};

Kepada situasi yang lebih maju, seperti menyimpan data produk di stor negeri atau menghantar prop kepada komponen lain dalam JS Frameworks

---

Isu-isu

Sekarang mari kita atasi isu dengan pendekatan ini:

1. Bagaimana jika id produk tidak semudah ini dan mudah diingati? Bagaimana jika ia adalah seperti ab12-w35-s48-09 (mewakili contohnya vendor-category-product-variant)?
2. Bagaimana jika, dan ini adalah perkara utama saya, anda terpaksa menukar jenis id produk, dalam semua kejadiannya sepanjang projek anda? Ini mungkin amat sukar jika anda memberikan nama yang berbeza (seperti productId, product_id, pid atau id) apabila merujuknya dalam fail yang berbeza. Anda juga tidak boleh mencari rentetan kerana anda pasti akan menemui banyak kejadian yang tidak berkaitan dengannya.

---

Penyelesaian Berpotensi

Untuk menangani isu satu, anda boleh menggunakan Jenis Literal Templat, yang akan menjadikan jenis id produk baharu: ${string}-${string}-${string}-${string}. Mengulangi ini merentas berbilang fail kini akan menjengkelkan, jadi seseorang boleh sama ada:

• buat jenis tersuai untuk medan id dan gunakannya dalam ProductType:

type ProductIdType = `${string}-${string}-${string}-${string}`

Jika perlu, anda juga boleh membuat dan merujuk kepada jenis yang berbeza untuk setiap rentetan, atau merujuk kepada orang lain yang anda buat sebelum ini. Akhirnya anda akan menggunakan jenis baharu seperti:

(productId : ProductIdType) => {...}

• atau anda boleh merujuk kepada entri id ProductType:

(productId : ProductType['id']) => {...}

Kedua-dua pendekatan ini akan menyelesaikan isu dua: di mana sahaja anda menemui ProductIdType atau ProductType['id'], anda akan tahu bahawa anda sedang berurusan dengan id produk dan tahu bahawa anda harus menggantikannya.

Penyelesaian pertama mungkin kelihatan lebih mesra, tetapi kini anda akan mempunyai struktur dua belah, di mana anda mempunyai satu jenis untuk produk dan satu lagi untuk id, yang boleh digunakan secara bebas. Berikut ialah contoh perwakilan struktur tersebut:

Ini sudah pasti isu yang lebih kecil, tetapi jika anda menukar/memadam masukan id ProductType, perubahan itu tidak akan ditunjukkan dalam keseluruhan projek anda.

Pendekatan terakhir, walau bagaimanapun, adalah yang biasa saya ikuti, kerana ia meningkatkan gandingan data anda (dengan kekurangan perkataan yang lebih baik). Semua rujukan anda kepada data produk kini menghala terus kepada ProductType:

---

Kesimpulan

Saya tidak mengatakan anda harus sentiasa membuat jenis untuk semua data anda. Setiap kali saya melihat diri saya mengulangi rujukan kepada jenis data yang sama, saya biasanya memilih untuk mengakses yang asal, seperti dalam pendekatan kedua.

Petua bonus 1: Anda boleh menggunakan logik yang sama untuk const: Jika anda melihat diri anda mengulang nombor atau rentetan ajaib yang sama di berbilang tempat, sebaiknya berikan ia sebutan yang betul dan gunakannya.

Petua bonus 2: Gunakan Pilih, Abaikan dan Kecualikan dan Jenis Utiliti lain jika anda ingin memilih/mengecualikan lebih daripada satu entri jenis dan bukannya mengulanginya.

Itu sahaja! Saya harap anda menyukai siaran saya. Sila tinggalkan maklum balas anda tentang topik ini.

Atas ialah kandungan terperinci Meningkatkan Gandingan dalam Projek anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!