TypeScript: JavaScript dengan Gaya dan Tipe Data Statis

JavaScript bener-bener jadi salah satu bahasa pemrograman paling populer di dunia saat ini. Kemampuannya yang bisa dipakai di sisi server maupun client secara bersamaan menjadi salah satu faktor utama kenapa bahasa ini dicintai banyak developer.

Gaya penulisan dinamis alias dynamic typing juga jadi keunggulan tersendiri buat JavaScript. Soalnya, kita sebagai programmer bisa menulis kode secara ekspresif tanpa perlu pusing-pusing memikirkan deklarasi tipe data sejak awal.

Tapi, kebebasan itu kadang malah berbalik jadi musuh utama pas kode yang kita tulis sudah mulai membesar dan kompleks. Kalau nggak teliti, tumpukan kode yang rumit itu rentan banget memicu runtime error. Salah satu error yang paling sering bikin senam jantung yaitu:

Uncaught TypeError: Cannot read properties of undefined (reading 'val')
    at :1:5

Nah, di saat-saat kritis seperti inilah fitur static typing dan type checking bakal terasa sangat berharga. Oleh karena itu, hadirlah TypeScript sebagai alternatif penyelamat JavaScript dengan sedikit gaya! 😎

Tentang TypeScript

Sederhananya, TypeScript adalah superset dari JavaScript. Artinya, TypeScript membawa semua fitur bawaan JavaScript, tapi ditambah dengan fitur-fitur ekstra yang powerful. Fitur utamanya meliputi optional static typing, type checking, class, dan interface.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

~ typescriptlang.org

Kode TypeScript yang kita tulis nantinya nggak bisa langsung dijalankan begitu saja. Komputer harus menerjemahkan (compile) kode tersebut menjadi JavaScript standar terlebih dahulu, karena browser maupun Node.js cuma paham JavaScript biasa.

Kerennya lagi, karena sifatnya yang kompatibel ke belakang, kalian tetap bisa menuliskan kode JavaScript murni di dalam berkas TypeScript. Tapi ingat ya, hal ini nggak berlaku sebaliknya.

Fitur andalan TypeScript tentu saja adalah kemampuannya menambahkan tipe data (type) ke dalam JavaScript. Tipe data ini adalah properti wajib yang harus melekat pada setiap data yang kita definisikan.

Entah itu pada variabel, fungsi, parameter, atau objek lainnya. Kalau nggak pakai fitur tipe data ini, kode TypeScript yang kalian tulis bakal balik lagi jadi JavaScript biasa. Melalui proses transpilasi, anotasi tipe tersebut akan dihapus hingga menyisakan kode JavaScript murni yang siap dieksekusi.

📷 Ilustrasi: diagram proses kompilasi kode TypeScript dengan anotasi tipe data menjadi kode JavaScript standar.

Kenapa Harus Pakai TypeScript?

Kalau ditanya kapan dan kenapa kalian harus beralih ke TypeScript, jawabannya kembali ke kebutuhan masing-masing. Semua tergantung skala proyek dan preferensi kalian sendiri.

Tapi secara umum, TypeScript sangat disarankan buat proyek skala menengah ke atas yang kodenya bakal terus berkembang. Kalau cuma buat proyek kecil-kecilan atau sekadar eksperimen singkat, pakai JavaScript biasa pun sebenarnya sudah cukup kok.

Buktinya, banyak framework web modern seperti Angular, Vue v3, Nuxt 3, dan NestJS yang ditulis memakai TypeScript. Alasan utamanya apalagi kalau bukan sistem static type yang ampuh menekan potensi runtime error di lingkungan produksi.

Selain itu, pengembangan sisi back-end (server) di ekosistem Node.js sekarang juga sudah lumrah menggunakan TypeScript. Bahkan, ada Deno yang mendukung TypeScript secara bawaan (native) tanpa konfigurasi tambahan.

Masih butuh alasan lain buat mencoba TypeScript? Berikut beberapa keuntungan menarik lainnya:

• Self-documented code — Kehadiran tipe data di setiap variabel dan parameter fungsi secara otomatis mendokumentasikan maksud dari kode tersebut. Kita nggak perlu menebak-nebak tipe data apa yang harus dikirim ke sebuah fungsi.
• Deteksi error sejak dini — Kode TypeScript wajib melewati proses kompilasi terlebih dahulu. Di fase inilah compiler bakal menyaring dan menunjukkan letak error agar bisa langsung kalian perbaiki sebelum aplikasi di-deploy. Selamat tinggal runtime error! 👋
• Dukungan Functional Programming — Sama seperti JavaScript, TypeScript juga mendukung gaya pemrograman fungsional secara penuh.
• Pemrograman Berorientasi Objek (OOP) yang matang — Konsep seperti abstraction, encapsulation, inheritance, dan polymorphism bisa kalian terapkan dengan rapi tanpa perlu trik atau hack aneh-aneh lagi.
• Memaksimalkan fitur Editor — Ini bagian favorit saya. Fitur-fitur keren seperti auto-completion, sugerensi kode, error checking, dan IntelliSense bakal menyala maksimal di code editor kesayangan kalian.
• Developer Experience (DX) yang memuaskan — Pengalaman menulis kode pakai TypeScript terasa jauh lebih menyenangkan. Kombinasi IntelliSense yang aktif dan jaminan kode yang lebih aman dari runtime error bikin proses koding jadi makin percaya diri.

Dari JavaScript ke TypeScript

Mari kita lihat contoh kasusnya. Kode JavaScript biasa kadang bisa membingungkan kalau dibaca pertama kali, terutama karena sifat dinamisnya. Apalagi kalau kita kurang teliti dalam menamai variabel atau fungsi—dan jujur saja, memberi nama yang pas itu memang sulit banget!

Coba perhatikan cuplikan kode JavaScript di bawah ini:

function add(a, b){
    return a + b;
}

function fullName(firstName, lastName){
    return firstName + " " + lastName;
}

Kita punya dua fungsi sederhana. Keduanya sama-sama menerima dua parameter, tapi tujuannya berbeda. Fungsi add dirancang buat menjumlahkan angka, sedangkan fungsi fullName dibuat buat menggabungkan nama depan dan belakang.

Sekarang, coba kita panggil kedua fungsi tersebut dengan cara yang agak 'ngawur':

console.log(add(2, 4));                  // output 6
console.log(add("inva", "sikode"));      // output invasikode
console.log(fullName("inva", "sikode")); // output inva sikode
console.log(fullName(2, 4));             // output 24

Walaupun kita memasukkan argumen yang salah target (add("inva", "sikode") dan fullName(2, 4)), JavaScript nggak bakal protes dan tetap menjalankan kodenya karena secara sintaks memang dianggap valid.

Tapi perilaku seperti ini rawan memicu kekacauan logika di aplikasi kalian, terutama saat bekerja dengan tim besar.

Nah, TypeScript hadir buat menyelesaikan masalah ini dengan mendefinisikan jenis data apa saja yang boleh diterima oleh sebuah fungsi.

Sekarang mari kita ubah fungsi tadi menggunakan sintaks TypeScript:

function add(a: number, b: number): number{
    return a + b;
}

function fullName(firstName: string, lastName: string): string{
    return firstName + " " + lastName;
}

Cukup dengan menambahkan keterangan tipe data dan mengubah ekstensi berkas dari .js menjadi .ts, fungsi kita sekarang sudah terproteksi dengan baik.

Jika kita mencoba memanggil fungsinya dengan parameter yang salah seperti sebelumnya:

console.log(add(2, 4));                  // output 6
console.log(add("inva", "sikode"));      // error kompilasi!
console.log(fullName("inva", "sikode")); // output inva sikode
console.log(fullName(2, 4));             // error kompilasi!

Saat kalian mencoba melakukan kompilasi, TypeScript bakal langsung menolak dan memunculkan pesan error. Bahkan, code editor seperti VS Code juga bakal langsung menandai baris yang salah dengan garis merah:

Argument of type 'string' is not assignable to parameter of type 'number'.
Argument of type 'number' is not assignable to parameter of type 'string'.

📷 Ilustrasi: peringatan galat tipe data di editor VS Code dengan garis bawah merah dan kotak pesan penjelasan error.

Dengan begini, kita dipaksa buat menggunakan fungsi sesuai dengan aturan mainnya. Cara ini sangat efektif buat meminimalisir celah bug pada proyek yang kalian kembangkan.

Bagaimana? Tertarik buat mencoba TypeScript di proyek selanjutnya? Kalian bisa langsung meluncur ke situs resminya di typescriptlang.org buat belajar lebih lanjut.

Selamat berkoding ria 👋