Mengapa Typescript?
Kenapa why selalu always tetapi but tidak pernah never?
Karena because itu that!
Pertama kali saya kerja di Bloomon, saya bergabung bersama squad yang sedang mengembangkan system in-house company ini yang kebetulan menggunakan Typescript di sisi frontend-nya. Setelah launching 5 bulan kemudian, kami berpindah squad biar gak nganggur. Main task baru saya kali ini adalah me-maintain website utama company yang ditulis menggunakan Javascript. Merasa kurang nyaman, kami propose develop projek ini menggunakan Typescript dan secara tidak mengejutkan kami “diprotes” sama temen-temen yang sudah lama di squad ini, “Javascript aja udah cukup tauk pake k!”, “Kasih types itu nggak penting..”, “type is typing.. (capek-capekin aja nulis code lebih panjang)”, dan sebagainya. 😅
Jika kamu punya pertanyaan dan pernyataan serupa: apakah worth menggunakan Typescript, apakah Javascript saja belum cukup, apakah TS dapat meningkatkan productivity, apa kau dengaar suara angin yang berhembus di muka bumiii, semoga beberapa alasan di bawah ini dapat menjawab ya 😉
⚠️ Perlu diingat bahwa di sini saya nggak akan membanding-bandingkan Typescript dengan Flow, keduanya memiliki plus-minus nya masing-masing. Terlebih, saya nggak pernah pake Flow, jadi ndak bisa bikin judgement 😛
1. Membantu New Joiner Cepat Beradaptasi 📚
Ini satu alasan yang menurut saya puaaaling penting. Sekitar satu minggu yang lalu ketika satu-satunya backend developer di squad saya sedang off dan ada tiket backend yang harus diselesaikan, mau nggak mau saya (sebagai frontend dev) harus ngerjain tiket itu biar disayang PO. Pas saya oprek salah satu service yang ditulis di Node.js, ada sebuah function bernama prepareUser (bukan nama sebenarnya 🕵🏻) yang menerima sebuah input dan mengembalikan sesuatu.
const data = prepareUser(rawUser);Dua pertanyaan seketika muncul: Apa tipe data rawUser? Apa nilai dari data? Most likely, jawabannya: rawUser itu pasti object om, data juga pasti object. Nah masalahnya, object yang kayak gimana?
Untuk mengetahuinya, saya harus liat detail implementasi dari prepareUser yang masyaallah sungguh sangat indah:
function prepareUser(rawUser) {
// ...
if (rawUser.countryCode === 'nld') Object.assign(res, ...);
if (rawUser.id) Object.assign(res, ...);
// ...
return res;
}Baru setelah melakukan scanning isi function yang berjumlah 129 baris itu, saya jadi tahu, oh, object rawUser itu setidaknya harus punya attribute countryCode dan id. Dan nilai kembalian dari fungsi tersebut adalah object juga dengan segala attribute yang di-assign ke variable res. Butuh waktu sekitar 10 menit untuk mencerna itu semua.
Jika ditulis menggunakan Typescript, mungkin akan lain cerita:
Dari code di atas, saya langsung tahu bahwa rawUser ternyata adalah sebuah object bertipe User, yang wajib memiliki attribute email dan countryCode, dan tidak harus memiliki attribute id. Pun dengan data, saya tidak perlu melihat implementasi dari function prepareUser, cukup dengan meng-hover mouse saya di atas variable data dan boom, semua jelas seketika 😉.
Ini baru satu function lho, di satu file, belum di file lain, belum di folder lain, belum di projek lain. Betapa frustasinya kita jika harus membaca semua isi function hanya untuk mengetahui apa parameter dan nilai kembaliannya.
2. Typescript is Just Javascript ️❤️
Mungkin terdengar agak klise, tapi beberapa kali saya perhatikan masih cukup banyak yang menganggap Typescript adalah sebuah bahasa pemrograman yang baru, sangat berbeda dengan Javascript pada umumnya, harus tau ekosistemnya, dan butuh waktu yang nggak sebentar untuk mempelajarinya. I would say no. Karena pada dasarnya, Typescript adalah superset dari ECMAScript, yang berarti semua yang kamu lakukan di Javascript pasti bisa dilakukan di Typescript. Malah, semua proposal fitur ECMAScript yang sudah mencapai stage-3 ke atas sudah diterapkan di Typescript secara default seperti async-await, generators, import(), spread operator, dll. Selengkapnya bisa dicek di sini: https://kangax.github.io/compat-table/es6/#typescript3.1. Semua developer Javascript pasti bisa menggunakan Typescript.
Dan yang terpenting adalah filosofi dari Typescript itu sendiri: “Align with current and future ECMAScript proposals”. Core team Typescript nggak akan menanggapi request fitur yang tidak sesuai dengan spesifikasi ECMAScript (misal yang berpotensi mengubah syntax penulisan Javascript). Full list goal-nya bisa dibaca di sini: https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals
Jadi, dari segi syntax dan compatibility-nya dengan Javascript, kita aman 😉
3. Safer Code ⛑
Kita bisa kok menganggap Typescript hanyalah sebuah tool untuk melakukan static type-checking.
Pada baris ke-8, kita men-declare argument product harus memliki tipe ProductModel. Itulah mengapa di baris ke-11 ndak ada error dan di baris ke-14 terjadi error. Error karena kita malah pass sebuah object kopong sedangkan fungsi getFinalPrice hanya menerima object yang setidaknya memiliki attribute id, name, price, dan tax.
Contoh lain dimana TS dapat membantu correctness program kita:
Kira-kira, apa tipe data product di baris ke-18? Apakah ProductModel? Atau yang lainnya?
Salah! (ngegas) Jawabannya adalah ProductModel | undefined. Karena ketika kita memanggil funsgi getProductById, kita mencari apakah item ber-id 1 ada di dalam productList, yang mana bisa jadi item tersebut tidak ada di dalam list. TS akan komplain apabila kita coba memanggil fungsi getFinalPrice setelahnya:
(dengan syarat opsi --strictNullChecks harus aktif)Untuk mendapatkan value-nya, bisa melakukan “if-else” seperti biasa:
const finalPrice = product ? getFinalPrice(product) : 0;// atauif (!product) throw new Error('No product found');
const finalPrice = getFinalPrice(product);
SAFE! 😺 Intermezzo: ada sebuah studi baru-baru ini menyimpulkan bahwa penggunaan type ketika development dapat mengurangi bug sebesar 15%.
(Sayangnya di artikel tersebut menyebutkan bahwa TS butuh sytax yang lebih panjang daripada Flow agar menjadi produktif 🙈🙈🙈)
4. Zero Overhead ketika Run Time 0️⃣
Semua “type” dan/atau “interface” yang kita tulis di Typescript akan hilang ketika di-transpile. Jadi serumit apapun “type” yang kita buat, nggak akan berarti apa-apa ketika run time karena semuanya akan dihapus: zero overhead. Output code-nya pun bisa terbaca jelas 😃
Gambar ini semakin menunjukkan bahwa Typescript hanyalah Javascript yang diberi type. Kalau penasaran dan mau explore lebih jauh, bisa main-main ke TS playground.
5. Inference 🧠
Beberapa dari kita mungkin pernah berasumsi: “hmm biasanya kalo bahasa yang ada type nya itu terlalu verbose, semua perlu kita kasih type!”. Eit tunggu dulu, di beberapa kasus, Typescript does that for you.
const name: string = 'Jihad';
const name2 = 'Jihad';name2 akan secara otomatis bertipe string tanpa perlu melakukan type assertion seperti name. Pun dengan fungsi getFinalPrice tadi, TS meng-infer-nya dengan:
const getFinalPrice: (product: ProductModel) => numberpadahal kita tidak pernah men-declare return type-nya. Contoh lain:
Kita tahu bahwa kita “tidak bisa” mengubah value dari object yang di-define di dalam Object.freeze, TS pun meng-infer-nya dengan type Readonly plus bonus key name dengan value type nya! How nice!
A good language is when the compiler helps you, not you helping the compiler
6. Tooling 🛠
Ini dia nih yang gak kalah penting, tooling! Tooling bisa menjadi salah satu faktor terbesar sebuah bahasa pemrograman agar dapat diadopsi dengan mudah secara luas. Bentuk tooling yang paling umum adalah kemudahan konfigurasi di text editor. Untungnya, TS sudah di-support by default oleh text editor yang super kece: VS Code!
1. install VS Code
2. mkdir new-project
3. cd new-project
4. npm i -D typescript
5. tsc --init
6. Enjoy! 🎉Terlebih VS Code support code intellisense yang memberikan kita rekomendasi type yang kompatible seperti contoh di bawah ini:
Pun ketika melakukan refactoring: misal saya ingin mengubah nama attribute di dalam interface ProductModel dari id menjadi productId. Ketika kita Klik Kanan -> Rename Symbol, semua variable dan data yang dianggap oleh Typescript bertipe ProductModel['id'], akan berubah namanya menjadi ProductModel['productId'] dimanapun ia berada, walaupun digunakan di banyak file.
7. Supports JSX by Default 🎗
Buat kamu-kamu developer React (kayak saya), gak perlu cemas karena TS secara default sudah support JSX. Sebagai bukti yang valid, bisa langsung dicek ke source code compiler Typescript itu sendiri 😛
Syaratnya cuman satu, file ini harus disimpan dengan extension .tsx.
Kesimpulan
Menurut saya pribadi, Typescript akan sangat sangat membantu jika scope projek kita cukup besar dan dikembangkan bersama oleh banyak developer. Komunikasi bisa terbantu lewat type dan interface. Ketika ada perubahan struktur data (misal response dari suatu endpoint berubah), refactor akan sangat mudah karena kita akan di-guide oleh Typescript. Bisa dicari dengan kata kunci “Type Driven Development”.
Code kita pun akan terdokumentasi dengan baik seperti contoh di atas. DeliveryTimeResponse adalah bentuk object response dari suatu endpoint. Kita ndak perlu test manual dan mengingat-ingat bagaimana bentuk response-nya dari server. Cukup lihat interface saja. Ketika ada perubahan bentuk pun kita cukup ubah interface dan sesuaikan di function transformDeliveryTimeReponse. All nice and clean 🛀🏻
So, gunakanlah Typescript 😄
If you find this article useful, hit the green clap so you can help others discover the article 👏🏻
Semoga bermanfaat 🙂
