Mengubah Codebase React Kamu Menjadi TypeScript - CRUDPRO
Home  ›  Others

Mengubah Codebase React Kamu Menjadi TypeScript

Written By Thursday, June 8, 2023
Mengubah Codebase React Kamu Menjadi TypeScript

Saat kami mulai mengembangkan fitur baru untuk produk sumber terbuka kami, saya menyadari potensi manfaat dari memigrasikan produk ke TypeScript setelah melakukan penelitian tentang beberapa kebutuhan yang akan kami miliki saat menggunakan API inti kami. Meskipun awalnya kami tidak mempertimbangkan TypeScript selama fase desain sistem, kami yakin ini adalah waktu yang tepat untuk beralih.

Untungnya, tim kami berpikiran terbuka dan menerima untuk menjelajahi keuntungan dari migrasi ke TypeScript. Dengan dukungan semua orang, saya melanjutkan migrasi dan mendapatkan pengalaman berharga dalam proses tersebut.

Melihat ke belakang, ada beberapa pelajaran penting yang saya dapatkan selama proses migrasi. Dengan membagikan wawasan kami, saya berharap dapat membantu orang lain yang sedang mempertimbangkan langkah serupa untuk menghemat waktu dan menghindari perangkap umum.

Mulailah Dengan Yang Sederhana

Jika Anda sedang mentransisikan basis kode Anda dari JavaScript ke TypeScript, penting untuk melakukan pendekatan yang hati-hati. Daripada mencoba memigrasi semuanya sekaligus, Anda mungkin akan merasa lebih mudah untuk memulai dengan bagian basis kode yang lebih sederhana.

Sebagai contoh, pertimbangkan untuk memulai dengan fungsi utilitas Anda. Ini sering berdiri sendiri dan tidak memiliki ketergantungan kompleks, yang membuat mereka menjadi kandidat yang bagus untuk migrasi awal. Saat Anda memigrasikan setiap fungsi, lihat bagaimana fungsi itu digunakan dalam basis kode dan file apa yang mengimpornya. Ini akan memberi Anda pemahaman yang lebih baik tentang ketergantungan antara bagian kode Anda yang berbeda.

Secara bertahap tingkatkan pohon dependensi, migrasikan file dan komponen saat Anda melakukannya. Saat Anda melakukannya, Anda mungkin akan menemukan beberapa file yang lebih kompleks dari yang lain. Dalam kasus ini, tidak masalah menggunakan arahan “@ts-nocheck” untuk mengecualikan file ini dari proses migrasi untuk sementara, tetapi jangan lupa untuk kembali dan mengurusnya nanti.

Mengambil pendekatan bertahap untuk proses migrasi akan membantu memastikan bahwa Anda menemukan masalah atau kesalahan apa pun yang muncul di sepanjang jalan. Dengan memulai dari yang kecil dan terus meningkat, Anda akan dapat memigrasikan basis kode Anda ke TypeScript dengan cara yang efisien, efektif, dan berkelanjutan.

Ekspor Semua Jenis Anda

Saat bekerja dengan TypeScript, sangat penting untuk rajin mengekspor tipe Anda. Bahkan jika Anda merasa tidak perlu mengimpor suatu jenis ke file lain, tetap merupakan kebiasaan yang baik untuk mengekspornya. Dengan cara ini, kode Anda akan lebih teratur, dan akan lebih mudah untuk menemukan dan menggunakan kembali tipe saat Anda membutuhkannya.

Saat menentukan jenis, akan sangat membantu untuk menganggapnya sebagai blok penyusun yang dapat digunakan kembali. Dengan mengekspor jenis, Anda membuatnya tersedia untuk bagian lain dari basis kode Anda, bahkan jika tidak segera dibutuhkan. Ini bisa sangat berguna dalam proyek besar dengan banyak modul dan file.

Selain membuat kode Anda lebih terorganisir dan dapat digunakan kembali, mengekspor jenis juga dapat membantu mencegah kesalahan. Ketika sebuah tipe didefinisikan dalam satu modul tetapi digunakan di modul lain, TypeScript akan memeriksa apakah tipe tersebut sesuai dengan bentuk yang diharapkan. Ini dapat membantu mendeteksi bug di awal proses pengembangan dan menghemat waktu dan tenaga Anda dalam jangka panjang.

Singkatnya, biasakan mengekspor jenis Anda, bahkan jika Anda merasa tidak membutuhkannya di modul lain. Melakukan hal itu akan membantu membuat kode Anda lebih teratur, dapat digunakan kembali, dan tidak rentan terhadap kesalahan.

Buat Definisi Tipe Untuk Data API Anda

Saat membangun aplikasi yang berinteraksi dengan API, penting untuk membuat definisi tipe untuk data yang dikirimkan kembali oleh API. Melakukan hal itu dapat membantu Anda menghindari kesalahan dan membuat kode Anda lebih dapat dipelihara.

Misalnya, Anda membuat aplikasi obrolan yang menggunakan API backend untuk mengambil pesan. Anda dapat membuat jenis “Pesan” yang menentukan struktur pesan, termasuk bidang seperti “id”, “konten”, dan “cap waktu”. Dengan menggunakan jenis ini di seluruh kode Anda, Anda dapat memastikan bahwa aplikasi Anda selalu menangani data pesan secara konsisten.

Selain membantu mencegah kesalahan, membuat definisi tipe untuk respons API juga dapat membuat kode Anda lebih mudah dibaca dan dipelihara. Dengan menentukan jenis yang sesuai dengan bentuk data yang diharapkan, Anda dapat memperjelas bagaimana berbagai bagian aplikasi Anda dimaksudkan untuk bekerja bersama.

Tentu saja, membuat definisi tipe untuk respons API memang memerlukan beberapa pekerjaan awal. Anda harus hati-hati memeriksa data yang dikirim kembali oleh API dan membuat jenis yang secara akurat mencerminkan strukturnya. Namun, manfaat dari melakukan hal itu sepadan dengan usaha.

Sebagai kesimpulan, saat membangun aplikasi yang berinteraksi dengan API, meluangkan waktu untuk membuat definisi tipe untuk respons API dapat membantu Anda menghindari kesalahan, meningkatkan keterbacaan kode, dan membuat kode Anda lebih mudah dipelihara.

Atur Layer Anda dengan Benar

TypeScript adalah bahasa yang kuat yang dapat membantu Anda menangkap kesalahan bahkan sebelum terjadi. Namun, untuk memanfaatkan fitur-fitur TypeScript secara maksimal, penting untuk menyiapkan lingkungan pengembangan Anda dengan benar. Salah satu langkah kuncinya adalah mengonfigurasi linter Anda agar bekerja dengan TypeScript.

Jika Anda menggunakan ESLint sebagai linter Anda, Anda mungkin mengalami masalah dengan aturan standar no-unused-vars. Aturan ini dapat bertentangan dengan pemeriksaan tipe TypeScript dan menyebabkan kesalahan positif. Untungnya, ada aturan khusus no-unused-vars untuk TypeScript yang bisa Anda gunakan.

Untuk mengaktifkan aturan ini, Anda perlu mengupdate konfigurasi ESLint Anda. Khususnya, Anda harus menonaktifkan aturan default no-unus-vars dan mengaktifkan versi khusus TypeScript. Ini dapat dilakukan dengan memodifikasi file eslint.config.js Anda, dengan menambahkan baris berikut:

"rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"]
}

Dengan membuat perubahan ini, Anda akan memastikan bahwa linter Anda telah dikonfigurasi dengan benar untuk bekerja dengan TypeScript. Ini dapat membantu Anda menemukan lebih banyak kesalahan dan meningkatkan kualitas kode Anda secara keseluruhan.

Sebagai kesimpulan, jika Anda bekerja dengan TypeScript, penting untuk menyiapkan linter Anda dengan benar. Dengan menonaktifkan aturan no-unus-vars default dan mengaktifkan versi khusus TypeScript, Anda dapat menghindari false positive dan menemukan lebih banyak error. Dengan linter yang terkonfigurasi dengan benar, Anda akan siap untuk menulis kode TypeScript berkualitas tinggi.