Sign in Subscribe

Gimana Rasanya Coding Pake TypeScript Setelah Lama Pakai JS

Gimana Rasanya Coding Pake TypeScript Setelah Lama Pakai JS
Photo by AltumCode/Unsplash

Pasti banyak di antara kita yang udah lama banget ngoding pake JavaScript (JS). Udah nyaman, udah terbiasa sama fleksibilitasnya, udah hapal 'jeroannya'. Mau bikin aplikasi web kecil-kecilan, gede-gedean, backend pake Node.js, mobile pake React Native, semua bisa lah digas pake JS. Rasanya kayak udah megang kunci ajaib buat bikin apa aja di dunia digital.

Tapi seiring waktu, kok makin sering denger kata 'TypeScript'? Atau mungkin malah udah mulai ketemu project yang pake TS dan ngerasa 'wah, kok beda ya?'. Penasaran, tapi ada juga rasa malesnya. Males belajar lagi, males nambahin ini-itu ke code, males diomelin sama 'compiler'. Nah, buat yang lagi di fase ini, atau yang udah nyoba tapi masih abu-abu rasanya, yuk kita bedah gimana sih rasanya beralih (atau nyoba) coding pake TypeScript setelah sekian lama berselancar di dunia JS.

Fase Awal: Antara Penasaran dan Curiga

Waktu pertama kali denger TypeScript, biasanya reaksi awal tuh campur aduk. Ada rasa penasaran karena katanya TS ini "JS with superpowers" atau "JS yang lebih aman". Tapi di sisi lain, ada juga rasa curiga. "Lho, kok pake type segala? Bukannya enaknya JS itu bebas mau masukin apa aja?". Fleksibilitas JS itu kayak pedang bermata dua memang. Enak buat prototyping cepat, tapi bisa jadi bumerang pas project makin gede atau dikerjain bareng tim.

Jadi, pas mulai nyentuh TS, mungkin yang paling kerasa itu... aneh. Kayak lagi ngomong bahasa yang familiar, tapi tiba-tiba disuruh nambahin keterangan buat tiap kata. Misalnya, di JS kita bisa bikin fungsi function greet(name) { return 'Hello, ' + name; } dan kita bisa panggil greet('Dunia') atau greet(123) atau bahkan greet({ nama: 'User' }). JS bakal coba jalani aja, mungkin hasilnya aneh atau malah error pas runtime nanti.

Di TS, fungsi itu langsung minta "jaminan". Kita harus kasih tau name itu tipe datanya apa. Jadi nulisnya jadi function greet(name: string): string { return 'Hello, ' + name; }. Artinya, parameter name harus string, dan fungsi ini bakal mengembalikan nilai bertipe string. Pas kita coba panggil greet(123), langsung pas kita nulis code, editor kita udah ngasih tau: "Warning! Argument of type 'number' is not assignable to parameter of type 'string'." Ini yang namanya compile-time error. Error-nya ketahuan sebelum code-nya dijalanin!

Awal-awal, notifikasi error dari TS ini bisa bikin jengkel. "Aduh, salah lagi. Kurang type ini, kurang type itu." Rasanya kayak lagi belajar coding dari awal lagi, tapi dengan aturan yang lebih ketat. Setup project TS juga butuh sedikit effort lebih dibanding JS murni (install TS, bikin tsconfig.json). Fase ini memang butuh kesabaran ekstra.

Fase "Oh, Jadi Gini Rasanya Aman"

Setelah melewati fase awal yang agak "menyebalkan", pelan-pelan kita mulai ngerasain enaknya pake TS. Yang paling nonjok itu rasa aman. Ibaratnya, kalau coding pake JS itu kayak jalan di pinggir jurang tapi nggak ada pagarnya (bebas mau ke mana aja, tapi risiko jatuh tinggi), coding pake TS itu kayak jalan di tempat yang sama tapi udah dipasangin pagar pembatas yang kokoh. Kita masih bisa ke mana-mana, tapi ada batasan jelas yang mencegah kita nyemplung ke jurang error yang aneh-aneh.

Rasa aman ini paling kerasa di beberapa hal:

  1. Nggak Takut Typo: Sering kan salah ketik nama variabel atau property objek? Misalnya, objeknya user punya property firstName, tapi pas dipake malah ditulis firsName. Di JS, ini bakal jadi undefined dan error-nya muncul pas aplikasi jalan, kadang di tempat yang jauh dari sumber masalahnya. Di TS, pas ngetik user.firsName, editor langsung teriak "Property 'firsName' does not exist on type '{ firstName: string; lastName: string; }'!". Ini super ngebantu!
  2. Refactoring Jadi Berani: Mau ganti nama fungsi? Ganti nama property di objek yang dipake di banyak file? Di JS, ini kerjaan yang bikin deg-degan. Harus nyari satu-satu di mana aja kode itu dipake. Di TS, kalau kita rename pake fitur editor (misalnya di VS Code), editor itu pinter. Dia bakal update semua penggunaan fungsi/property itu di seluruh codebase, dan kalau ada yang kelewat atau ada yang salah penulisan setelah rename, TS bakal langsung kasih error. Refactoring jadi jauh lebih cepat dan minim risiko.
  3. Ngoding Jadi Lebih Cepet (Paradoks?): Kok bisa? Kan nulisnya jadi lebih banyak gara-gara nambahin type? Iya, nulisnya memang kadang lebih banyak. Tapi, waktu debug-nya jauh berkurang. Masalah yang biasanya baru ketahuan pas runtime (dan kadang bikin pusing nyari akar masalahnya), di TS udah ketahuan duluan pas kita nulis code. Selain itu, fitur auto-completion di editor jadi powerful banget. Pas ngetik nama variabel atau objek, editor langsung tau isinya apa aja, propertinya apa aja, dan parameternya apa aja kalau itu fungsi. Ini kayak punya asisten pintar yang ngasih tau semua kemungkinan yang bisa kita lakuin. Produktivitas naik signifikan.
  4. Makin Gampang Kerja Tim: Bayangin kalau project JS udah gede banget, dikerjain rame-rame. Developer A bikin fungsi, developer B mau pake fungsi itu. Di JS, developer B harus lihat implementasi fungsi A, atau tanya ke A, fungsi itu butuh parameter apa aja dan ngembaliin apa. Di TS, cukup lihat definisi fungsi A. Type-nya udah jelas ngasih tau ekspektasinya. Komunikasi antar developer jadi lebih efisien dan miskomunikasi karena beda pemahaman tipe data bisa dihindari. Codebase jadi lebih mudah dipahami orang lain (atau diri sendiri di masa depan).
  5. Codebase Lebih Terstruktur: Dengan adanya interface, type alias, enum, dan fitur-fitur TS lainnya, kita dipaksa untuk memikirkan struktur data kita dengan lebih matang. Ini bikin codebase jadi lebih rapi, terorganisir, dan mudah di-maintain dalam jangka panjang.

Tantangan yang Mungkin Masih Ada

Meskipun banyak enaknya, bukan berarti nggak ada tantangannya sama sekali. Beberapa hal yang mungkin masih terasa "kurang nyaman" atau butuh adaptasi lebih:

  • Belajar Konsep Type yang Kompleks: Awalnya mungkin cuma pake string, number, boolean, array, object. Tapi nanti ketemu interface, type alias, union types, intersection types, enum, generics, conditional types, mapped types. Nah, ini bisa bikin pusing di awal. Generics, misalnya, butuh pemahaman abstrak yang lumayan buat ngerti cara kerjanya. Tapi tenang, ini kayak belajar fitur lanjutan di bahasa apapun, pelan-pelan aja.
  • Integrasi Sama Library JS Lama: Kalau projectnya migrasi dari JS murni, atau mau pake library JS yang udah lama dan nggak punya type definition built-in, kita mungkin perlu nyari atau install @types/namalibrary dari DefinitelyTyped. Kadang nggak semua library punya type definition yang lengkap atau up-to-date. Tapi untungnya komunitas TS ini gede banget, jadi kemungkinan besar library populer udah ada typenya.
  • Setup Awal: Meskipun nggak sesulit dulu, setup awal (install TS, konfigurasi tsconfig.json, setup build process) memang sedikit lebih ribet daripada langsung nulis .js file. Tapi ini cuma di awal project atau awal migrasi.
  • Kadang Terasa Rigid (di Awal): Ada momen di mana kita cuma pengen bikin sesuatu super cepat, tapi TS maksa kita mikirin type-nya dulu. Ini bisa terasa menghambat di awal. Tapi seiring waktu, mikirin type ini bakal jadi kebiasaan baik yang justru mempercepat proses development secara keseluruhan.

Tips buat yang Mau Mulai atau Lagi Beradaptasi

Buat yang udah lama di JS dan mau nyemplung ke TS, atau yang lagi di tengah proses transisi dan ngerasa "duh kok gini ya", ini ada beberapa tips biar perjalanannya lebih mulus:

  1. Nggak Usah Buru-buru Langsung Jadi Master: Nggak perlu langsung ngerti semua fitur TS yang canggih. Mulai dari yang basic: string, number, boolean, Array, object, function. Pahami cara kerjanya type annotation (: type) dan type inference (TS bisa nebak tipenya tanpa kita tulis eksplisit).
  2. Manfaatkan Type Inference: TS itu pinter banget lho. Seringkali, kita nggak perlu nulis type secara eksplisit karena TS bisa nebak sendiri. Contoh: let name = 'Budi'; -> TS langsung tau name tipenya string. const numbers = [1, 2, 3]; -> TS tau numbers tipenya number[]. Gunakan kekuatan ini biar code nggak terlalu "berisik" dengan type annotation.
  3. Mulai dari Project Baru atau Fitur Baru: Kalau mau migrasi project lama, jangan langsung rewrite semuanya. Coba mulai dari fitur baru yang mau dibikin, tulis pake TS. Atau, mulai dari module/file yang kecil dan paling independen. TS punya opsi allowJs di tsconfig.json yang bikin file .js dan .ts bisa hidup berdampingan. Jadi bisa migrasi pelan-pelan.
  4. Install @types: Ini penting banget kalau pake library JS. Kalau pake library axios, jangan lupa install @types/axios. Ini yang ngasih "informasi" ke TS tentang struktur dan type library itu, biar editor kita pinter.
  5. Pakai Editor yang Dukung TS Banget: VS Code itu jagoannya dalam urusan TS. Fitur IntelliSense (auto-completion, hover info, go-to-definition) di VS Code jadi powerhouse pas pake TS. Pastiin editor kamu punya dukungan yang bagus.
  6. Pelajari tsconfig.json: File ini adalah "otak" konfigurasi TS. Mulai dari yang basic dulu (misalnya target, module, outDir, strict, rootDir). Nanti pelan-pelan explore opsi lain kalau dibutuhkan. Opsi strict: true itu direkomendasikan banget kalau project baru, karena memaksa kita nulis code yang lebih aman dari awal.
  7. Jangan Takut Sama Error Compile-time: Awalnya memang bikin kaget. Tapi anggap aja error ini adalah teman baik yang ngasih tau kita ada potensi masalah sebelum aplikasinya jalan dan bikin user bete. Baca pesan error-nya baik-baik, TS biasanya kasih tau kok di mana letak masalahnya.
  8. Kapan Pake any? (dengan Hati-hati): Ada kalanya kita stuck dan nggak tau tipenya apa, atau memang mau "mematikan" pemeriksaan type sementara di bagian tertentu. Bisa pake type any. Tapi jangan dijadikan kebiasaan! any itu kayak balik lagi ke JS murni di baris itu. Kehilangan semua manfaat type safety. Gunakan sebagai "escape hatch" sementara kalau benar-benar buntu, dan usahakan segera diganti dengan type yang lebih spesifik kalau sudah tahu informasinya.

Jadi, Gimana Rasanya Setelah Pake TS?

Setelah melewati masa adaptasi, rasanya coding pake TypeScript itu kayak naik level. Yang tadinya merasa bebas banget tapi was-was, sekarang jadi ngerasa lebih terarah, lebih percaya diri, dan lebih profesional. Tooling jadi jauh lebih membantu, nemuin error itu kayak main petak umpet yang seru karena cepet ketemu, dan ngerti codebase orang lain (atau codebase sendiri yang udah lama nggak dilihat) jadi jauh lebih mudah.

Buat project-project kecil atau prototyping cepat, mungkin JS murni masih terasa lebih light. Tapi begitu projectnya mulai membesar, dikerjakan tim, atau mau di-maintain jangka panjang, keuntungan pake TypeScript itu kerasa banget. Pengorbanan waktu di awal buat belajar dan setup itu terbayar lunas dengan berkurangnya waktu debugging dan meningkatnya kepercayaan diri pas ngembangin fitur baru atau nge-refactor code lama.

Perasaan yang paling dominan setelah nyaman dengan TS adalah peace of mind. Nggak was-was lagi kalau ada typo, yakin kalau parameter fungsi itu sesuai dengan yang diharapkan, dan tahu kalau perubahan yang kita bikin nggak merusak bagian lain dari aplikasi secara diam-diam. Ini bikin proses coding jadi lebih menyenangkan dan nggak stress.

Jadi, kalau kamu developer JS yang udah lama dan lagi mikir-mikir mau nyoba TypeScript, go for it. Persiapan mental aja buat melewati fase adaptasi awalnya. Setelah itu, kamu bakal ngerasain sendiri kenapa banyak developer dan tim yang akhirnya jatuh cinta sama TypeScript. Ini bukan cuma tentang nambahin type ke code, tapi tentang bikin development process kita jadi lebih solid, efisien, dan delightful. Selamat mencoba!