Kenapa TypeScript

Kenapa ini penting

JavaScript adalah bahasa dinamis: sebuah variabel boleh berisi angka hari ini dan teks besok, dan tidak ada yang protes sampai kodenya benar-benar berjalan. Fleksibel, tapi mahal. Bug baru ketahuan ketika user mengklik tombol tertentu, di HP tertentu, dengan data tertentu. Kadang malah ketahuan dari keluhan pelanggan.

Bayangkan kamu mengirim paket lewat jasa ekspedisi. Kalau petugas loket memeriksa alamat sebelum paket dikirim ("Pak, kode posnya kurang satu digit"), kesalahan diperbaiki dalam 10 detik. Kalau tidak diperiksa, paket berangkat, nyasar ke kota lain, dan kembali seminggu kemudian. JavaScript itu ekspedisi tanpa petugas loket. TypeScript adalah petugas loketnya: memeriksa "alamat" setiap nilai sebelum kode dikirim ke browser.

Di dunia kerja, TypeScript sudah menjadi standar. Next.js, Vite, Angular, NestJS, dan hampir semua library besar ditulis dengan TypeScript atau minimal menyediakan tipe. Lowongan frontend dan full-stack di Indonesia maupun luar negeri hampir selalu mencantumkan TypeScript. Kamu juga akan merasakan manfaat yang sering dilupakan pemula: autocomplete. Editor tahu isi setiap object, jadi kamu tidak perlu bolak-balik membuka dokumentasi atau console.log hanya untuk mengingat nama properti.

Konsep inti

Apa itu TypeScript

TypeScript adalah JavaScript ditambah sistem tipe. Semua kode JavaScript yang valid juga TypeScript yang valid (dengan sedikit catatan saat mode strict). Kamu menambahkan anotasi tipe seperti : string atau : number, lalu compiler TypeScript (tsc) memeriksa apakah kodenya konsisten. Setelah itu, anotasi tipe dihapus dan yang tersisa adalah JavaScript biasa. Browser dan Node.js tidak pernah melihat tipe.

kode.ts  ──(tsc memeriksa tipe)──►  laporan error di editor/terminal
kode.ts  ──(tipe dihapus)────────►  kode.js  ──►  dijalankan browser/Node

Static typing vs dynamic typing

Compile time vs runtime

Ini konsep terpenting di modul ini, dan akan kembali lagi di modul Data API. Compile time adalah saat tsc atau editor membaca kodemu. Runtime adalah saat kode benar-benar dijalankan. TypeScript hanya bekerja di compile time. Artinya:

• TypeScript bisa menangkap: salah ketik nama properti, memanggil function dengan argumen yang salah, lupa menangani kemungkinan null.
• TypeScript tidak bisa menjamin data dari luar (respons API, input form, localStorage) benar-benar sesuai tipe. Data itu baru ada saat runtime. Untuk itu kita butuh validasi runtime seperti Zod.

Analoginya: TypeScript itu seperti pemeriksa denah rumah. Ia bisa bilang "pintu ini terlalu sempit untuk lemari yang kamu rencanakan". Tapi kalau tukang ternyata mengirim lemari yang ukurannya beda dari pesanan, pemeriksa denah tidak akan tahu.

TypeScript 7: compiler native

Sejak versi 7.0 (Juli 2026), compiler TypeScript ditulis ulang dalam bahasa Go (proyek ini dulu dijuluki "Project Corsa"). Kamu tetap menginstalnya dengan npm install -D typescript dan menjalankan perintah yang sama, tsc. Bedanya terasa di kecepatan: tim TypeScript melaporkan build penuh biasanya 8-12x lebih cepat dibanding TypeScript 6, dan editor jauh lebih responsif di proyek besar. Ada juga beberapa default yang berubah (misalnya strict kini aktif secara default) yang akan kita bahas di modul Setup.

Adopsi industri

Hampir semua alat yang akan kamu pakai berikutnya sudah "berbahasa" TypeScript: create-next-app membuat proyek TypeScript secara default, template Vite punya varian react-ts, dan paket seperti React menyediakan tipe lewat @types/react. Library modern seperti Zod, TanStack Query, dan Zustand ditulis dengan TypeScript sehingga autocomplete-nya sangat kaya. Survei developer tahunan (misalnya Stack Overflow Developer Survey dan State of JS) secara konsisten menempatkan TypeScript di jajaran bahasa paling banyak dipakai dan paling disukai.

Biaya yang perlu kamu tahu

TypeScript bukan gratis. Kamu menulis sedikit lebih banyak kode, perlu langkah build atau pemeriksaan tambahan, dan di awal akan sering "berdebat" dengan compiler. Tapi biaya ini dibayar di depan, sedangkan bug runtime dibayar belakangan dengan bunga. Untuk proyek yang lebih dari beberapa ratus baris atau dikerjakan lebih dari satu orang, hampir selalu sepadan.

Contoh kode

Berikut bug yang sangat umum di JavaScript. Kodenya "jalan", tapi hasilnya salah dan tidak ada yang memberi tahu:

// keranjang.js, JavaScript biasa
function hitungTotal(items) {
  return items.reduce((total, item) => total + item.harga * item.jumlah, 0);
}

const keranjang = [
  { nama: "Kopi", harga: 25000, jumlah: 2 },
  { nama: "Roti", harga: "15000", jumlah: 1 }, // harga berupa teks, misalnya dari input form
  { nama: "Teh", hrga: 10000, jumlah: 1 },     // salah ketik: hrga
];

console.log(hitungTotal(keranjang));
// → NaN  (Teh: undefined * 1 = NaN, dan NaN "menular" ke seluruh total)

Tidak ada error, hanya NaN yang muncul di layar kasir. Sekarang versi TypeScript-nya:

// keranjang.ts, TypeScript
type ItemKeranjang = {
  nama: string;
  harga: number;
  jumlah: number;
};

function hitungTotal(items: ItemKeranjang[]): number {
  return items.reduce((total, item) => total + item.harga * item.jumlah, 0);
}

const keranjang: ItemKeranjang[] = [
  { nama: "Kopi", harga: 25000, jumlah: 2 },
  { nama: "Roti", harga: "15000", jumlah: 1 }, // ❌ error TS2322: Type 'string' is not assignable to type 'number'.
  { nama: "Teh", hrga: 10000, jumlah: 1 }, // ❌ error TS2561: Object literal may only specify known properties, but 'hrga' does not exist in type 'ItemKeranjang'. Did you mean to write 'harga'?
];

console.log(hitungTotal(keranjang));

Kedua bug tertangkap sebelum kode dijalankan, dan TypeScript bahkan menyarankan perbaikannya (Did you mean to write 'harga'?). Setelah dua baris itu diperbaiki, tsc diam (tidak ada output berarti tidak ada error) dan hasilnya:

// setelah diperbaiki
type Item = { nama: string; harga: number; jumlah: number };

const total = [
  { nama: "Kopi", harga: 25000, jumlah: 2 },
  { nama: "Roti", harga: 15000, jumlah: 1 },
  { nama: "Teh", harga: 10000, jumlah: 1 },
].reduce((acc: number, item: Item) => acc + item.harga * item.jumlah, 0);

console.log(total); // → 75000

Contoh lain: TypeScript menangkap kemungkinan nilai kosong.

// cari-user.ts
const daftarUser = [
  { id: 1, nama: "Sari" },
  { id: 2, nama: "Budi" },
];

const user = daftarUser.find((u) => u.id === 3); // tipe: { id: number; nama: string } | undefined

console.log(user.nama); // ❌ error TS18048: 'user' is possibly 'undefined'.

// Cara benar: periksa dulu
if (user) {
  console.log(user.nama.toUpperCase());
} else {
  console.log("User tidak ditemukan"); // → User tidak ditemukan
}

Di JavaScript, baris user.nama akan meledak dengan TypeError di runtime. Di TypeScript, kamu dipaksa memikirkan kasus "tidak ketemu" sejak awal.

Kesalahan umum

1. Mengira TypeScript berjalan di browser. Browser hanya menjalankan JavaScript. Tipe dihapus sebelum kode dijalankan, jadi tidak ada pemeriksaan tipe saat runtime. Kalau butuh pemeriksaan runtime, pakai validasi (Zod) di batas aplikasi.
2. Mengira TypeScript menghilangkan semua bug. TypeScript menangkap bug bentuk data dan pemakaian yang salah. Bug logika (diskon dihitung 10% padahal harusnya 15%) tetap butuh testing.
3. Menambal setiap error dengan any. any mematikan pemeriksaan tipe. Kalau semua diberi any, kamu punya beban TypeScript tanpa manfaatnya. Pelajari tipe yang tepat atau pakai unknown (modul Tipe Dasar).
4. Menganggap error compiler sebagai musuh. Pesan error TypeScript adalah petunjuk gratis. Baca dari bawah ke atas: baris terakhir biasanya paling spesifik.
5. Menunggu "nanti saja pakai TypeScript-nya". Migrasi proyek besar jauh lebih berat daripada mulai dengan TypeScript sejak awal. Untuk proyek baru, langsung pakai template TypeScript.

Latihan

1. Mudah, Tulis versi TypeScript dari function luasPersegiPanjang(panjang, lebar) yang hanya menerima angka dan mengembalikan angka. Coba panggil dengan luasPersegiPanjang("5", 3) dan catat pesan errornya.
2. Sedang, Buat tipe Produk (nama, harga, stok) dan array tiga produk. Tulis function totalNilaiStok yang menghitung jumlah harga * stok. Sengaja salah ketik satu nama properti dan lihat saran TypeScript.
3. Menantang, Tulis function cariProduk(daftar, nama) yang memakai .find(), lalu function hargaProduk(daftar, nama) yang mengembalikan harga atau 0 kalau tidak ditemukan. Pastikan tidak ada error possibly 'undefined'.

// 1. Mudah
function luasPersegiPanjang(panjang: number, lebar: number): number {
  return panjang * lebar;
}
console.log(luasPersegiPanjang(5, 3)); // → 15
// luasPersegiPanjang("5", 3);
// error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

// 2. Sedang
type Produk = { nama: string; harga: number; stok: number };

const gudang: Produk[] = [
  { nama: "Pensil", harga: 3000, stok: 100 },
  { nama: "Buku", harga: 12000, stok: 20 },
  { nama: "Penghapus", harga: 2000, stok: 50 },
];

function totalNilaiStok(daftar: Produk[]): number {
  return daftar.reduce((acc, p) => acc + p.harga * p.stok, 0);
}
console.log(totalNilaiStok(gudang)); // → 640000

// 3. Menantang
function cariProduk(daftar: Produk[], nama: string): Produk | undefined {
  return daftar.find((p) => p.nama === nama);
}

function hargaProduk(daftar: Produk[], nama: string): number {
  const produk = cariProduk(daftar, nama);
  return produk ? produk.harga : 0;
  // alternatif singkat: return cariProduk(daftar, nama)?.harga ?? 0;
}
console.log(hargaProduk(gudang, "Buku")); // → 12000
console.log(hargaProduk(gudang, "Tas"));  // → 0

Ringkasan

• TypeScript adalah JavaScript plus sistem tipe; tipe diperiksa saat compile time lalu dihapus.
• Static typing menangkap salah ketik, argumen salah, dan nilai yang mungkin undefined sebelum kode dijalankan.
• TypeScript tidak memeriksa data saat runtime; data dari luar tetap perlu divalidasi.
• TypeScript 7 (Juli 2026) memakai compiler native berbasis Go yang 8-12x lebih cepat, dengan perintah yang sama: tsc.
• TypeScript adalah standar industri: Next.js, Vite, dan library modern mendukungnya penuh.