React dan TypeScript — Kombinasi Untuk Pengembangan yang Lebih Mudah
React Loves TS## React dan TypeScript — Kombinasi Untuk Pengembangan yang Lebih Mudah
Di Kata.ai kita menggunakan React dan TypeScript untuk semua front end kita. Kita merasakan bahwa penggunaan TypeScript bisa membantu kita membuat kode yang lebih bebas dari bug, karena TypeScript akan menangkap inkonsistensi tipe.
Kenapa TypeScript
TypeScript membantu kita supaya bisa konsisten dalam penggunaan tipe data. TypeScript memastikan bahwa variabel tertentu, memiliki tipe data tertentu, dan jika tipe datanya berubah, maka harus didefinisikan juga.
TypeScript bekerja dengan dua cara, inferensi tipe, dan anotasi tipe. Ketika sebuah tipe diberi anotasi, maka kita memberi tahu TypeScript, bahwa variabel ini harus berisi tipe yang ditentukan. Jika kita tidak memberikan anotasi tipe, maka TypeScript akan meng-infer tipe dari nilai yang ada.
Jenis penentuan tipe di TypeScript, inferensi dan anotasiKarena TypeScript mengetahui tentang tipe melalui anotasi dan inferensi, maka TypeScript bisa menyediakan asistensi kode melalui Language Server. Language Server ini bisa dihubungkan ke editor yang mendukungnya seperti Visual Studio Code. Karena itu, Visual Studio Code bisa memberikan asistensi kode yang bagus untuk TypeScript.
Language Server TypeScript di Visual Studio Code memberi tahu bahwa yang sedang diakses mempunyai tipe data numberSelain alasan di atas, berdasarkan data dari Stack Overflow Developer Survey 2019, TypeScript ada di urutan ketiga dari bahasa yang paling disukai.
Stack Overflow Developer Survey 2019Dari presentasi Laurie Voss , Chief Data NPM di JSConf Asia 2019 — menyebutkan bahwa 63% pengembang JavaScript menggunakan TypeScript, dan lingkup @types di NPM terus berkembang dan menjadi salah satu lingkup yang paling aktif di NPM, seiring orang-orang menggunakan TypeScript dan/atau berkontribusi ke definisi tipe TypeScript.
Presentasi dari Laurie Voss tentang penggunaan TypeScriptLingkup @types yang ada di NPM ini berisi definisi tipe yang ditulis oleh orang-orang untuk pustaka yang sebelumnya hanya ada di JavaScript, sehingga bisa digunakan di TypeScript.
Untuk melihat bagaimana TypeScript bisa membantu kita dan kenapa di Kata.ai kita menyukai TypeScript, mari kita mencoba membuat sebuah To-do List sederhana.
Membuat To-do List Sederhana
Untuk kasus ini, kita akan menggunakan Code Sandbox sebagai editor sehingga kita tidak perlu melakukan prekonfigurasi untuk React dan TypeScript. CodeSandbox untuk artikel ini tersedia di link di bawah:
kata-todo-list-ts - CodeSandbox
*CodeSandbox is an online editor tailored for web applications.*codesandbox.ioKita bisa mulai dengan pembuatan store untuk manajemen todo list kita.
Definisi tipe untuk store todo listDi sini kita mendefinisikan tipe yang ada di store todo list kita. Kita akan menggunakan definisi tipe ini untuk membuat hook manajemen todo list kita.
Definisi reducer untuk store todo listKita tentukan bahwa hook kita akan menggunakan TodoItem[] sebagai tipe data statenya, dan untuk kemungkinan actions-nya ada dalam bentuk TodoItemsActions.
Detik itu juga ketika kita selesai mendefinisikan tipe, maka editor Code Sandbox (yang ditenagai Visual Studio Code) — bisa memberikan sugesti.
Code Sandbox memberikan sugesti bahwa parameter memiliki isi action dan payloadSetelah membuat manajemen todo list, kita bisa memulai membuat komponen yang akan menampilkan todo list tersebut. Sama seperti sebelumnya, kita dahului dengan mendefinisikan tipe yang akan digunakan komponen kita. Dalam hal ini, tipe untuk props di tiap komponen.
Definisi tipe untuk komponenSetelah mendefinisikan tipe, kita bisa buat komponen TodoListItem yang menggunakan tipe tersebut.
Definisi komponen yang menggunakan tipe TodoListItemPropsPerhatikan bahwa Code Sandbox memastikan bahwa properti yang bisa diambil dari props harus sesuai dengan yang didefinisikan di TodoListItemProps.
Perhatikan bahwa TypeScript bisa memberitahu properti apa saja yang mungkin dari sebuah objekLakukan yang sama dan buat komponen TodoList.
Definisi komponen TodoListPerhatikan lagi, bahwa saat kita memanggil komponen TodoListItem di JSX, Code Sandbox juga bisa memberikan sugesti bahwa dia menerima props sesuai TodoListItemProps, dan jika ada props selain dari yang didefinisikan, makan akan terjadi error.
TypeScript memberi tahu bahwa ada properti OnCheck di komponen tersebut
Juga melakukan pengecekkan jika ada properti asing yang tidak didefinisikanAkhirnya, kita bisa membuat komponen App yang membungkus komponen yang sudah kita buat dan menyambungkannya dengan store todo .
Menggabungkan semuanya
Kita bisa merasakan, bahwa asisten kode, sugesti, hingga pengecekan error untuk props yang tidak sesuai tipe bisa ditangkap oleh TypeScript. Dengan demikian, kita bisa mengurangi bug yang bisa terjadi karena typo, salah memberikan props, hingga salah memanggil action type.
Best Practice React dan TS
Di Kata.ai, kita mempunyai beberapa praktis yang kita lakukan untuk membuat React dan TypeScript bisa digunakan dengan baik.
- Selalu definisikan tipe untuk props dan state komponen.
- Gunakan enum untuk mendefinisikan konstanta.
- Definisikan tipe untuk setiap kemungkinan kombinasi action dan payload untuk reducer.
- Hindari penggunaan tipe any.
- Gunakan tipe data bawaan TypeScript seperti Record, Pick, dan sebagainya.
- Gunakan TSLint untuk linter, kita menggunakan https://github.com/kata-ai/tslint-config-kata.
- Gunakan mode strict.
Jika kalian ingin menggunakan komponen React yang ditulis menggunakan TypeScript, kita juga membuat https://github.com/kata-ai/wicara yang bisa kalian gunakan.
Menggunakan TypeScript dengan Redux
Jika kalian ingin menggunakan TypeScript dengan Redux, ada artikel yang membahas detailnya di https://hackernoon.com/writing-better-reduxs-code-with-typescript-b7a3c1209bca (artikel dalam Bahasa Inggris)
Kesimpulan
TypeScript sangat membantu kita dalam penulisan kode yang lebih baik. Bug dan errors bisa ditangkap lebih awal selama kita mendefinisikan tipe kita dengan baik. Kombinasikan React dengan TypeScript, dan kalian akan mendapatkan dua teknologi yang bekerja dalam harmoni, untuk kode yang lebih baik dan bebas bug.
By Aditya Purwa on July 8, 2019.
Exported from Medium on June 19, 2023.