Pengenalan TypeScript
Apa itu TypeScript, mengapa ia ada, bagaimana hubungannya dengan JavaScript, dan mengapa static typing membuat kode lebih aman.
Di bab sebelumnya kamu sudah mendapat gambaran besar tentang perjalanan yang akan ditempuh di ebook ini. Sekarang saatnya masuk ke inti pertanyaan yang paling sering muncul dari developer JavaScript: apa sebenarnya TypeScript itu, dan mengapa saya harus repot-repot belajar ini?
Pertanyaan yang wajar. JavaScript sudah bisa berjalan di browser, di server, di mana saja. Lalu apa yang kurang?
JavaScript dan Masalah yang Ia Ciptakan
JavaScript adalah bahasa yang luar biasa fleksibel. Kamu bisa menyimpan angka di sebuah variabel, lalu detik berikutnya mengisinya dengan string, lalu objek — dan JavaScript tidak akan komplain. Fleksibilitas ini terasa menyenangkan saat proyek masih kecil.
Masalah muncul ketika proyek berkembang. Bayangkan kamu menulis fungsi untuk menghitung total harga pesanan:
JAVASCRIPT// kalkulasi.js
function hitungTotal(harga, jumlah) {
return harga * jumlah;
}
Fungsi ini kelihatan sederhana. Tapi JavaScript tidak memaksamu untuk memanggil fungsi ini dengan cara yang benar. Kamu bisa saja menulis:
JAVASCRIPThitungTotal("50000", 3); // menghasilkan... 150000? atau "500003"?
Jawabannya: menghasilkan 150000 — karena JavaScript secara diam-diam mengonversi string "50000" menjadi angka sebelum mengalikan. Kali ini berhasil kebetulan, tapi tidak ada jaminan perilaku ini konsisten di semua kasus. Dan yang lebih berbahaya: kamu tidak akan tahu ada yang salah sampai kode dijalankan, mungkin sudah di production.
Inilah yang disebut runtime error — bug yang baru terdeteksi saat program sedang berjalan, bukan saat ditulis.
TypeScript: JavaScript dengan Kacamata
TypeScript adalah bahasa pemrograman yang dikembangkan oleh Microsoft dan dirilis pertama kali pada 2012. Ia bukan bahasa baru yang menggantikan JavaScript — TypeScript adalah superset dari JavaScript, artinya semua kode JavaScript yang valid juga merupakan kode TypeScript yang valid.
Yang TypeScript tambahkan adalah satu hal fundamental: sistem tipe statis (static type system).
Dengan TypeScript, kamu bisa memberi tahu kompiler tipe data apa yang diharapkan di setiap variabel, parameter fungsi, dan nilai kembalian. Kompiler TypeScript kemudian akan memeriksa apakah kode yang kamu tulis konsisten dengan tipe-tipe yang sudah dideklarasikan — sebelum kode dijalankan.
TYPESCRIPT// kalkulasi.ts
function hitungTotal(harga: number, jumlah: number): number {
return harga * jumlah;
}
hitungTotal("50000", 3);
// Error: Argument of type 'string' is not assignable to parameter of type 'number'
Perhatikan perbedaannya: kode yang sama, tapi TypeScript langsung menolak panggilan yang salah di baris tersebut, jauh sebelum program dijalankan. Error ini muncul di editor kamu, bukan di log server production.
Bagaimana TypeScript Bekerja
TypeScript tidak berjalan langsung di browser atau Node.js. Browser hanya memahami JavaScript. Karena itu, TypeScript perlu melalui proses kompilasi — kode .ts diterjemahkan menjadi .js oleh kompiler TypeScript (tsc).
TEXTKode TypeScript (.ts)
|
| tsc (TypeScript Compiler)
v
Kode JavaScript (.js)
|
v
Browser / Node.js
Proses kompilasi ini melakukan dua hal sekaligus: memeriksa tipe (type checking) dan menghasilkan JavaScript yang bersih. Semua informasi tipe dibuang dari output — JavaScript hasil kompilasi tidak membawa sisa-sisa TypeScript sama sekali. Ini berarti tidak ada overhead saat runtime; performa aplikasi identik dengan JavaScript biasa.
TypeScript adalah alat untuk masa pengembangan (development-time tool). Ia membantu kamu menulis kode yang lebih aman, tapi di production yang berjalan tetap JavaScript murni.
TypeScript vs JavaScript: Perbandingan Langsung
Untuk memperjelasnya, lihat contoh yang lebih konkret. Misalkan kamu memiliki sistem manajemen produk sederhana:
Versi JavaScript:
JAVASCRIPT// produk.js
function tampilkanProduk(produk) {
console.log(produk.nama + " - Rp" + produk.harga);
}
tampilkanProduk({ nama: "Laptop", hrg: 15000000 });
// Output: "Laptop - RpUndefined"
// Tidak ada error, tapi hasilnya salah karena typo "hrg" bukan "harga"
JavaScript tidak tahu bahwa hrg bukan properti yang diharapkan. Program berjalan, tapi outputnya salah. Kamu mungkin baru menyadari bug ini setelah pelanggan melaporkannya.
Versi TypeScript:
TYPESCRIPT// produk.ts
type Produk = {
nama: string;
harga: number;
};
function tampilkanProduk(produk: Produk): void {
console.log(produk.nama + " - Rp" + produk.harga);
}
tampilkanProduk({ nama: "Laptop", hrg: 15000000 });
// Error: Object literal may only specify known properties,
// and 'hrg' does not exist in type 'Produk'. Did you mean 'harga'?
TypeScript tidak hanya menangkap error — ia bahkan menyarankan perbaikan yang tepat. Bug yang tadinya tersembunyi sekarang terlihat jelas di editor, dengan pesan yang actionable.
Mengapa Developer Beralih ke TypeScript
Manfaat TypeScript bukan hanya tentang mencegah bug. Ada beberapa alasan mengapa TypeScript diadopsi secara luas di industri:
Produktivitas yang lebih tinggi — editor yang mendukung TypeScript (seperti VS Code) bisa memberikan autocompletion yang akurat, dokumentasi inline, dan navigasi kode yang cepat. Kamu tidak perlu membuka file lain untuk tahu properti apa saja yang dimiliki sebuah objek.
Refactoring yang lebih aman — ketika kamu mengubah nama sebuah properti atau signature fungsi, kompiler TypeScript langsung menunjukkan semua tempat di seluruh codebase yang terpengaruh perubahan itu. Di JavaScript, kamu hanya bisa berharap tidak ada yang terlewat.
Dokumentasi yang selalu sinkron — tipe-tipe yang kamu tulis adalah dokumentasi hidup. Tidak seperti komentar yang bisa ketinggalan zaman, tipe yang salah akan langsung menghasilkan error kompilasi.
Kompatibilitas penuh dengan ekosistem JavaScript — semua library npm yang sudah ada tetap bisa digunakan. Banyak library populer bahkan menyertakan type definition bawaan, atau tersedia lewat paket @types.
Jika kamu sudah familiar dengan JavaScript, kurva belajar TypeScript tidak securam yang dibayangkan. Kamu tidak perlu belajar paradigma baru — cukup tambahkan lapisan informasi tipe di atas sintaks JavaScript yang sudah kamu kenal.
TypeScript di Dunia Nyata
Adopsi TypeScript di industri tumbuh signifikan sejak pertengahan 2010-an. Beberapa framework dan library besar kini ditulis sepenuhnya dalam TypeScript: Angular, NestJS, Prisma, dan tRPC, untuk menyebut beberapa. React dan Vue pun menyediakan dukungan TypeScript kelas pertama.
Survei tahunan State of JS secara konsisten menunjukkan TypeScript sebagai salah satu teknologi dengan tingkat kepuasan developer tertinggi. Di banyak perusahaan teknologi, TypeScript sudah menjadi standar default untuk proyek JavaScript baru — bukan pilihan, tapi ekspektasi.
Memahami TypeScript bukan lagi nilai tambah di CV; untuk banyak posisi frontend dan fullstack, ini sudah menjadi prasyarat dasar.
Latihan
Sebelum melanjutkan ke bab berikutnya, coba pikirkan beberapa hal ini:
- Perhatikan kode JavaScript yang pernah kamu tulis — adakah fungsi yang parameternya bisa saja dipanggil dengan tipe yang salah? Seperti apa TypeScript akan menangani kasus itu?
- Jika TypeScript dikompilasi menjadi JavaScript biasa, apakah ada perbedaan performa antara aplikasi TypeScript dan JavaScript di browser?
- Bayangkan kamu bekerja di tim yang terdiri dari 10 developer. Aspek TypeScript mana yang menurutmu paling menguntungkan dalam konteks kolaborasi tim?
Tidak perlu menulis kode dulu — pertanyaan ini hanya untuk membangun intuisi sebelum kita masuk ke praktik langsung.
Sejauh ini TypeScript masih terasa abstrak karena kita belum menginstalnya dan belum menulis satu baris pun kode yang bisa dijalankan. Di bab berikutnya, kita akan mengubah itu: mulai dari instalasi, setup proyek pertama, sampai menjalankan file TypeScript untuk pertama kalinya.