TypeScript vs JavaScript

Analogi: Koki yang Mencicipi vs Koki yang Langsung Sajikan

Bayangkan dua koki. Koki pertama mencicipi masakannya sebelum disajikan: keasinan, tambah air; kurang matang, masak lagi. Koki kedua langsung menyajikan ke tamu, dan kalau ada yang salah, tamulah yang komplain. Koki pertama adalah TypeScript, koki kedua adalah JavaScript.

Keduanya memasak makanan yang sama enaknya (kode yang dijalankan identik). Bedanya hanya satu: kapan kesalahan ketahuan. TypeScript mencicipi sebelum disajikan (saat nulis kode), JavaScript menunggu komplain tamu (saat program jalan).

Kenapa Perbandingan Ini Penting?

Banyak pemula mengira TypeScript dan JavaScript adalah dua bahasa yang bersaing dan harus dipilih satu. Padahal TypeScript adalah JavaScript itu sendiri, hanya ditambah lapisan pemeriksaan. Pertanyaan yang benar bukan "mana yang lebih bagus", tapi "kapan lapisan pemeriksaan itu worth it".

Jawabannya tergantung tiga hal: seberapa lama kode akan hidup, berapa orang yang menyentuhnya, dan seberapa parah akibatnya kalau ada bug yang lolos. Script 30 baris yang kamu jalankan sekali lalu buang tidak butuh checklist pilot. Dashboard yang dipakai tim 5 orang selama 3 tahun sangat butuh.

Contoh 1: Error yang Sama, Waktu Berbeda

Lihat kode yang identik, nasib yang berbeda:

// JavaScript: tidak ada yang protes saat ditulis
const user = { nama: "Budi" };
console.log(user.umur.toFixed(2));
// Baru meledak saat dijalankan: TypeError: Cannot read properties of undefined

// TypeScript: protes saat ditulis, sebelum sempat dijalankan
const user = { nama: "Budi" };
console.log(user.umur.toFixed(2));
// Error: Property 'umur' does not exist on type '{ nama: string; }'.

Di JavaScript, kamu harus menjalankan program, menunggu crash, membaca stack trace, lalu menelusuri balik ke baris penyebabnya. Di TypeScript, editor langsung menunjuk barisnya dengan pesan yang jelas.

Contoh 2: Refactoring, Momen TypeScript Bersinar Paling Terang

Contoh yang sedikit lebih kompleks: kamu me-rename properti di object yang dipakai di banyak tempat.

type Produk = {
  namaProduk: string;
  harga: number;
};

function tampilkan(p: Produk): string {
  return `${p.namaProduk}: Rp${p.harga}`;
}

function hitungDiskon(p: Produk): number {
  return p.harga * 0.9;
}

const kopi: Produk = { namaProduk: "Kopi Susu", harga: 18000 };
console.log(tampilkan(kopi));
console.log(hitungDiskon(kopi));

Sekarang bayangkan requirement berubah dan namaProduk harus diganti jadi nama. Di JavaScript, kamu harus mencari manual setiap pemakaian namaProduk di seluruh project dan berharap tidak ada yang terlewat. Di TypeScript, cukup ubah definisi type Produk, dan compiler langsung mendaftar semua baris yang masih memakai nama lama, lengkap dengan error "Property 'namaProduk' does not exist". Refactoring besar jadi berani dilakukan.

Contoh Nyata: Error Compiler Beraksi

Kesalahan klasik saat pindah dari JavaScript: mengira semua properti object itu "ada":

const settings = {
  theme: "dark",
  fontSize: 14,
};

function applyTheme(s: typeof settings) {
  console.log(s.theme);
}

applyTheme({ theme: "light", fontSize: 16, bahasa: "id" });

Compiler menolak object yang membawa properti asing:

Di JavaScript, properti bahasa akan diam-diam diabaikan dan kamu bingung kenapa setting bahasa tidak berpengaruh. Di TypeScript, kamu langsung tahu: properti itu tidak dikenal, mungkin salah nama atau memang belum didukung.

Kesalahan Umum Pemula

1. Migrasi big-bang: me-rewrite seluruh project sekaligus

// SALAH: rename 200 file .js jadi .ts dalam sehari,
// lalu tenggelam dalam 500 error dan menyerah

// BENAR: bertahap.
// Langkah 1: rename satu file, biarkan longgar dulu
// Langkah 2: tambah tipe di file yang paling sering berubah
// Langkah 3: nyalakan strict: true kalau sudah siap
// TypeScript dirancang untuk migrasi bertahap, bukan rewrite.

2. Pakai TypeScript tapi semua bertipe any

// SALAH: TypeScript rasa JavaScript, checklistnya dimatikan semua
function proses(data: any): any {
  return data.apaSaja.boleh;
}

// BENAR: kalau belum tahu tipenya, pakai unknown dan persempit dulu
function proses(data: unknown): string {
  if (typeof data !== "string") throw new Error("butuh string");
  return data.toUpperCase();
}

3. Mengira TypeScript membuat program lebih cepat

// SALAH: "pakai TypeScript biar performanya naik"
// Kenyataannya output .js-nya identik dengan yang kamu tulis manual.

// BENAR: TypeScript membuat development lebih cepat (fewer bug,
// autocomplete akurat, refactoring berani), bukan runtime lebih cepat.
// Kecepatan eksekusi ditentukan logika dan algoritmamu, bukan tipenya.

Catatan teknis: Setiap sintaks JavaScript valid adalah TypeScript valid. Artinya kamu bisa membawa seluruh pengetahuan JavaScript-mu apa adanya, lalu menambah tipe sedikit demi sedikit. Tidak ada yang perlu di-unlearn.