Cara TypeScript Menjadikan Reaksi Lebih Baik: Pengalaman Pembangun yang Lebih Lancar, Kurang Pepijat (Dengan Contoh UseState)

Mari kita mulakan dengan senario dan tugasan yang berkaitan dengannya.

Kami mempunyai aplikasi pemesejan dengan bar status yang menunjukkan status semasa pengguna dan membolehkan mereka mengemas kininya. Kita perlu menambah lungsur turun dari mana pengguna boleh menukar status mereka dan menggunakan useState() untuk menunjukkan dan mengemas kini status semasa pengguna dalam UI.

Untuk kesederhanaan, kami hanya akan menumpukan pada pelaksanaan useState dalam artikel ini, dan menjelang akhir artikel, anda akan memahami bagaimana walaupun untuk contoh mudah TypeScript adalah pilihan yang lebih berkuasa.

Tugas

Kami perlu mentakrifkan useState() yang menyimpan dan mengemas kini userStatus dan dimulakan dengan salah satu daripada lima pilihan status yang mungkin (katakan aktif).

Semua pilihan yang mungkin adalah:

1. Aktif (aktif)
2. Jauh (jauh)
3. Jangan Ganggu (dnd)
4. Bercuti (cuti)
5. Di Luar Pejabat (OOO)

JSX/JS

Ini adalah tugas yang sangat mudah, bukan? Apa yang perlu kita lakukan ialah mentakrifkan useState dan mulakannya kepada aktif dan kemudian gunakan fungsi set untuk mengemas kini status dan kami telah selesai.

Tetapi tunggu! Apakah yang berlaku apabila seseorang menyemak kod saya atau melawat sekeping kod ini kemudian (katakan selepas 1 minggu, 2 minggu, 1 bulan, 6 bulan, atau apa sahaja), bagaimana mereka akan tahu apakah semua pilihan yang mungkin/sah?

Ahh! Ya, kami boleh menambah ulasan di sebelah useState untuk memberitahu mereka bahawa ini adalah semua pilihan yang mungkin.

Tetapi, ini bukan penyelesaian yang baik, bukan? Jadi, bagaimana kita boleh memperbaikinya?

Carian Objek

Pencarian objek ialah penyelesaian yang sangat bagus untuk masalah kami. Jadi, mari kita mulakan dengan mentakrifkan carian objek yang dipanggil UserStatus dan gunakannya untuk menetapkan nilai userStatus kami.

Sekarang, mari kemas kini definisi useState kami.

Sekarang, mari cuba kemas kini status.

Ohh! Lihatlah itu, kini kami mendapat autolengkap dalam editor kami dan boleh menyemak semua nilai yang mungkin/sah bagi UserStatus dengan melihat definisi UserStatus.

Isu dengan Carian Objek

Walaupun kaedah carian objek nampaknya telah menyelesaikan masalah kami dan pastinya merupakan penyelesaian yang jauh lebih baik daripada hanya menambah komen, ia masih mempunyai dua isu utama:

1. Bagi sesiapa yang melawat sekeping kod kami kemudian, mereka perlu tahu bahawa kami menggunakan carian objek untuk menetapkan keadaan kami. Ini mungkin kelihatan remeh tetapi bayangkan apabila komponen kita berkembang dan menjadi lebih kompleks, maka menjadi sangat mudah bagi seseorang untuk tidak menyedari pelaksanaan kita.
2. Ia masih tidak menghalang sesiapa pun daripada menetapkan sebarang nilai rawak kepada keadaan kita, walaupun mereka menyedari carian objek.  

Jadi, bagaimana kita boleh menyelesaikan isu ini?
Jawapan: Typescript

TSX/TS

Mari kita mulakan semula dengan penyelesaian kami, tetapi kali ini dalam fail .tsx atau Typescript. Kita boleh mulakan dengan mentakrifkan fungsi useState() dan memulakannya dengan nilai: aktif.

Tiada apa yang kelihatan berbeza sekarang, tetapi begitu. Mari kemas kini nilai Status pengguna.

Ahh! Seperti yang anda lihat, ia memberi kami garis ralat berlekuk merah yang ditakuti di sekeliling beberapa fungsi set tetapi bukan pada fungsi yang kami menetapkan nilai rentetan. Ini kerana Typescript menyimpulkan jenis keadaan kami daripada nilai awalnya (iaitu rentetan jenis).

Ya, ini akan menghalang kami daripada menetapkan sebarang nilai bukan rentetan kepada keadaan userStatus kami, tetapi ia masih tidak menghalang kami daripada menetapkan sebarang nilai rentetan rawak dan kami masih perlu menggunakan carian objek untuk mendokumenkan semua pilihan yang mungkin , anda boleh bertanya.
 

Jom buat "Satu Batu, Dua Burung".

Jenis Eksplisit dan Generik

Dalam Typescript kita boleh mencipta jenis tersuai dan ia juga mempunyai sokongan untuk generik yang boleh digunakan dalam React untuk definisi cangkuknya, dalam kes kami cangkuk useState().

Mari buat jenis UserStatus baharu dalam komponen React kami.

Sekarang, mari gunakan jenis ini dalam definisi useState kami.

Sehingga kini, semuanya kelihatan serupa dengan cara kami melakukannya dalam kaedah carian objek, tetapi keajaiban Typescript ialah apabila kami mula menggunakan fungsi set kami dan nilai keadaan.

1. Mendapatkan takrif jenis status pengguna.
   

2. Autolengkap untuk fungsi setUserStatus.
   

3. Mendapatkan pengesahan yang betul untuk nilai yang sah dan tidak sah.
   

Lihat itu,

1. Kami boleh mendapatkan dokumentasi semua nilai yang sah dengan hanya melayang di atas Status pengguna dan mencari definisi jenisnya.
2. Walau bagaimanapun, kami tidak perlu melihat definisi jenis nilai keadaan kami apabila menggunakan fungsi yang ditetapkan, kerana ia secara automatik memberikan kami autolengkap untuk semua pilihan yang sah.
3. Kini ia bukan sahaja memberi kita ralat semasa menetapkan nilai bukan rentetan, tetapi ia juga memberi kita ralat untuk menggunakan nilai rentetan yang tidak sah (iaitu ia akan sentiasa memberikan ralat untuk input yang tidak sah).

Kesimpulan

Sekarang, anda mungkin sudah faham bagaimana TypeScript benar-benar boleh meningkatkan pengalaman pembangunan kami. Kami hanya menconteng permukaan dengan contoh mudah di sini, tetapi hanya fikirkan tentang aplikasi dunia sebenar yang kami bina, menggunakan TypeScript boleh bermakna lebih sedikit pepijat dan pengalaman pembangun yang lebih baik secara keseluruhan.

Saya harap artikel ini menggalakkan anda mula menggunakan Typescript dalam semua aplikasi React anda dan membina pengalaman web yang hebat.

Jika anda menyukai artikel ini dan ingin menyambung, maka anda boleh berhubung dengan saya di Linked dan X/Twitter

Atas ialah kandungan terperinci Cara TypeScript Menjadikan Reaksi Lebih Baik: Pengalaman Pembangun yang Lebih Lancar, Kurang Pepijat (Dengan Contoh UseState). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!