Menggunakan TypeScript dengan React

Panduan intro untuk menggunakan TS dengan React

Seperti yang telah saya katakan sebelumnya sebelum menggunakan TypeScript dengan proyek yang sudah ada sebelumnya dapat merepotkan karena kebutuhan untuk kembali melalui seluruh aplikasi untuk mendeklarasikan pengetikan tetapi jika Anda adalah pengembang React seperti saya, berikut adalah panduan singkat tentang menggunakan TypeScript dengan Bereaksi.

Panduan ini mungkin tidak untuk semua orang karena ini hanya untuk pengembang React tetapi jika Anda adalah pengembang React dan ingin mempelajari TypeScript, Anda dapat melihat panduan saya sebelumnya tentang dasar-dasar TypeScript.

Apakah TypeScript adalah masa depan JavaScript? | oleh Steven Wu | Budaya Geek | Juli 2021 | Medium

Instalasi

React memiliki dukungan TypeScript sehingga yang perlu Anda lakukan hanyalah menjalankan perintah aplikasi create React normal Anda dengan flag template TS

npx create-react-app <app-name> --template typescript

      

Contoh kontra

Sebagai contoh saya, saya akan membangun aplikasi penghitung sederhana. Setelah boilerplate React selesai diinstal, saya membuat folder komponen aa di dalam direktori src dan membuat dua komponen ( Count.tsx & Counter.tsx) dan mengganti kode boilerplate React di App.tsx dengan kode saya.

Pertama Mari kita lihat komponen Hitung

TS dan React sangat kompatibel akhir-akhir ini, Anda cukup mendeklarasikan pengetikan Count sebagai Komponen fungsional React yang menggunakan prop yang akan menjadi prop count komponen ini dengan pengetikan angka. Ini sangat penting untuk menggunakan TypeScript dengan React, ini sangat berguna dalam skenario dunia nyata di mana pengembang lain mungkin mengerjakan kode Anda di masa mendatang dan mereka secara acak mencoba menambahkan angka sebagai string. Saya menemukan ini sebagai pengembang yang hebat karena ini akan menimbulkan kesalahan sebelum produk sampai ke tangan pelanggan.

Selanjutnya, mari kita lihat contoh berikutnya dari komponen kelas reaksi sekarang

Anda dapat melihat pada contoh di atas bahwa saya telah mendeklarasikan antarmuka Props yang dapat mengambil data apa saja dan antarmuka State yang hanya memiliki hitungan dengan mengetikkan angka.

Itu dia! Saya harap artikel ini memberi Anda wawasan yang cukup tentang apakah akan menggunakan TypeScript dengan React atau tidak. Saya pribadi akan menggunakan TS dengan React di masa depan karena fleksibilitasnya. Sangat bagus bahwa Anda dapat menangkap kesalahan sederhana dengan menentukan tipe sebelumnya ke komponen Anda atau memilih untuk tidak menentukan pengetikannya dalam kasus menggunakan alat peraga di mana Anda menginginkan fleksibilitas untuk meneruskan hal apa pun sebagai penyangga di pohon simpul.

Menjelaskan TS dengan React akan menjadi artikel yang terlalu panjang untuk sekali duduk. Saya akan memulai serangkaian artikel React yang akan mengajarkan semua konsep mulai dari pemula hingga mahir.

Jika Anda menikmati artikel ini, silakan ikuti atau tinggalkan komentar dan lihat artikel saya yang lain di Medium.

Suggested posts

Mencari Informasi Tentang Nama Domain

Kutipan dari Alat Perangkat Lunak Kecil dan Tajam oleh Brian P. Hogan

Mencari Informasi Tentang Nama Domain

Saat Anda membuat permintaan ke facebook.com, komputer Anda mencari nama domain untuk menerjemahkan nama domain tersebut menjadi alamat IP sehingga komputer Anda dapat membuat koneksi tersebut.

Menghindari Akibat Menghancurkan Stroke: Belajar dari Perjalanan Keluarga .

Menghindari Akibat Menghancurkan Stroke: Belajar dari Perjalanan Keluarga .

Pendahuluan Stroke adalah keadaan darurat medis yang dapat menyerang siapa saja kapan saja. Itu terjadi ketika aliran darah ke bagian otak terganggu, yang menyebabkan hilangnya fungsi otak secara tiba-tiba.

Related posts

Penganiayaan Umat Kristiani: Kejahatan Kebencian yang Tidak Kita Bicarakan

Lupakan Islamofobia: Kristen (dan Yahudi) adalah korban utama kejahatan kebencian agama.

Penganiayaan Umat Kristiani: Kejahatan Kebencian yang Tidak Kita Bicarakan

Pikiran rasional mana pun tahu bahwa lingkaran politik dan media didominasi oleh kiri, bahkan paling kiri, suatu keadaan yang menciptakan ketidakseimbangan dalam wacana politik. Di bidang agama, ketidakseimbangan ini terlihat jelas: surat kabar dan jaringan sayap kiri tidak terburu-buru membela iman Kristen.

Penampilan Solo Gadis Berambut Merah

Atas tugas dari Hayden, Katie memfilmkan dirinya sedang masturbasi.

Penampilan Solo Gadis Berambut Merah

Sudah lewat tengah malam ketika Hayden mengantar Katie kembali ke asrama kampusnya setelah malam mereka bersama. Dia memiliki kelas awal di pagi hari dan tidak memiliki pakaian ganti lagi setelah tinggal bersamanya malam sebelumnya.

Mencari Informasi Tentang Nama Domain

Kutipan dari Alat Perangkat Lunak Kecil dan Tajam oleh Brian P. Hogan

Mencari Informasi Tentang Nama Domain

Saat Anda membuat permintaan ke facebook.com, komputer Anda mencari nama domain untuk menerjemahkan nama domain tersebut menjadi alamat IP sehingga komputer Anda dapat membuat koneksi tersebut.

Kebohongan Koboi

Bagaimana perusahaan besar menjual kebohongan besar kepada orang Amerika

Kebohongan Koboi

Ini adalah pagi keemasan yang cemerlang di perbukitan barat, saat sinar pertama matahari menyinari rerumputan beku di dataran. Kawanan sapi Angus yang tenang, hitam legam dan besar, membentuk siluet melawan matahari terbit saat mereka menyusuri jalan setapak menuju lokasi yang mereka semua kenal dengan baik; bar sarapan.