Pendahuluan

Halo Semua,

Sebagai seorang Mobile Developer yang fokus pada pengembangan Aplikasi Native atau Hybrid tentu saya menggunakan Kotlin, Java atau Dart sebagai bahasa pemrograman untuk membangun Aplikasi, Bahasa ini adalah Type Safe arti nya bahasa ini memiliki sistem yang ketat, sehingga variabel, parameter, dan nilai harus sesuai dengan tipe data yang ditentukan pada saat kompilasi.

Saya memiliki Website Pribadi untuk menampilkan sebuah Portofolio menggunakan Framework React.js dengan tailwind css bisa teman-teman lihat disini https://haaweejee.vercel.app/ untuk mengembangkan nya saya menggunakan Javascript yang dimana bahasa ini adalah dynamically typed ya artinya tidak ada pengecekan tipe data yang ketat pada waktu kompilasi, lalu tipe data variabel dapat berubah-ubah selama program berjalan. ya jeleknya jika ada kesalahan tipe baru terdeteksi saat program dijalankan (runtime). KABOOM!.

Masalah

Sebenernya kalo dipikir-pikir dari sisi pengembangan React ini belum digunakan Project untuk Client atau Pekerjaan Utama tapi hanya untuk Hobi, cuman saya berpikir, “Kira-kira di React ini kita bisa pake gaya bahasa yang sama dengan Kotlin atau Dart ga ya?”. Saya berpikir seperti ini dikarenakan saya Belajar Golang untuk membangun API untuk kebutuhan pribadi itu mudah dipahami dikarenakan konsep yang sama. dan ternyata ada jawaban nya yaitu menggunakan Typescript.

Supaya masuk di akal kenapa harus mengubah bahasa dari javascript ke typescript ada beberapa hal yang harus dicatat:

  1. Kalo misal ada Error tipe datanya salah, itu akan dikasih tahu diawal kalo tipe data yang kita gunakan tidak tepat bukan harus kita jalankan dulu baru tau itu error.
  2. Kalo ganti tech stack ya rasanya seragam aja misal di hari Senin main di Mobile, tiba-tiba di Rabunya main Frontend, lalu disabtu Main Backend, ya ga terlalu susah baca kodenya karena memiliki 1 konsep yang sama.

Disclaimer

untuk cara instalasi dari migrasi ini bisa minta bantuan ke AI yang kalian percaya, ini merupakan history atau step-step yang memang saya lakukan berdasarkan UseCase yang saya punya.

Persiapan

Siapin Project yang udah ada Component Reactnya, Bebas aja sebenernya cuman sebagai contoh untuk studi kasusnya adalah Web Pribadi aja nah untuk Isi filenya seperti berikut:

image.png

Instalasi

Langkah Pertama buka Terminal, lalu jalankan dependensi ini (sok copas aja), tunggu sampai selesai.

npm install --save-dev typescript @types/react @types/react-dom

Kalo udah beres, bisa jalankan.

npx tsc --init

nanti akan kegenerate file ini