Rumah  >  Artikel  >  hujung hadapan web  >  Cara TypeScript Menjadikan Reaksi Lebih Baik: Pengalaman Pembangun yang Lebih Lancar, Kurang Pepijat (Dengan Contoh UseState)

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

Susan Sarandon
Susan Sarandonasal
2024-10-30 06:59:27579semak imbas

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.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Sekarang, mari kemas kini definisi useState kami.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Sekarang, mari cuba kemas kini status.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

Sekarang, mari gunakan jenis ini dalam definisi useState kami.

How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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.
    How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

  2. Autolengkap untuk fungsi setUserStatus.
    How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

  3. Mendapatkan pengesahan yang betul untuk nilai yang sah dan tidak sah.
    How TypeScript Makes React Better: Smoother Developer Experience, Fewer Bugs (With a useState Example)

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn