Pengenalan TypeScript

JavaScript yang Diberi Tipe

TypeScript adalah JavaScript ditambah sistem tipe statis. Kode .ts kamu dikompilasi jadi JavaScript biasa, jadi bisa jalan di mana pun JavaScript jalan: browser, Node.js, Deno, Bun.

Bedanya ada di satu hal penting: error ketahuan saat nulis kode, bukan saat user yang menemukannya.

Contoh Error yang Ditangkap Compiler

Bayangkan fungsi sederhana ini di JavaScript:

function hitungTotal(harga, jumlah) {
  return harga * jumlah;
}

hitungTotal("100", 2); // "100100"? tidak, ini jadi "100100" string? atau NaN?

Di JavaScript, hitungTotal("100", 2) lolos tanpa protes dan menghasilkan "100100" (string!), karena "100" * 2... eh tunggu, itu malah jadi 200. Nah, justru di situlah masalahnya: kamu harus menebak-nebak. Di TypeScript:

function hitungTotal(harga: number, jumlah: number): number {
  return harga * jumlah;
}

hitungTotal("100", 2);
// Error: Argument of type 'string' is not assignable to parameter of type 'number'.

Error muncul di editor, dengan garis merah, sebelum kamu sempat run. Inilah nilai jual utama TypeScript.

Kapan TypeScript Terasa Manfaatnya

• Project tim: tipe jadi dokumentasi hidup. Orang lain tahu bentuk data tanpa baca seluruh kode.
• Refactoring: ubah nama properti di satu tempat, compiler menunjukkan semua yang harus ikut berubah.
• API response: bentuk data dari backend ditulis sekali sebagai tipe, dipakai di semua komponen.

Catatan teknis: TypeScript tidak mengubah perilaku runtime. Semua anotasi tipe dihapus saat kompilasi (type erasure). Artinya : number tidak membuat pengecekan saat program jalan, hanya saat kompilasi. Validasi data dari luar (API, form) tetap butuh runtime check seperti Zod.

TypeScript Bukan Bahasa Baru

Semua sintaks JavaScript valid adalah TypeScript valid. Kamu bisa rename app.js jadi app.ts dan biasanya langsung jalan. Lalu tambah tipe sedikit demi sedikit. Tidak ada rewrite besar-besaran.