Debugging Type Error

Error TypeScript Bukan Musuh

Pesan error TypeScript memang panjang dan kadang menakutkan, tapi ia justru peta menuju perbaikan. Kuncinya: baca dengan strategi.

Error Klasik 1: Not Assignable

const nama: string = 123;
// Error: Type 'number' is not assignable to type 'string'.

Artinya sederhana: nilai tidak cocok dengan tipe yang diminta. Solusinya juga sederhana: perbaiki nilainya, atau perbaiki tipenya kalau tipenya yang salah tulis. Jangan refleks pakai as untuk membungkamnya.

Error Klasik 2: Possibly Null/Undefined

function proses(pengguna?: { nama: string }) {
  console.log(pengguna.nama);
  // Error: 'pengguna' is possibly 'undefined'.
}

Ini strict mode melindungimu dari crash runtime. Perbaiki dengan guard:

function proses(pengguna?: { nama: string }) {
  if (!pengguna) return;
  console.log(pengguna.nama); // ok
}

Atau pakai optional chaining pengguna?.nama kalau memang boleh undefined.

Error Klasik 3: Excess Property

interface Opsi { judul: string; }
const o: Opsi = { judul: "Hai", judl: "typo" };
// Error: Object literal may only specify known properties. Did you mean 'judul'?

Compiler bahkan menyarankan perbaikan typo. Ini salah satu error paling bersahabat.

Strategi Debugging

1. Jalankan npx tsc --noEmit untuk daftar error lengkap tanpa menghasilkan file.
2. Mulai dari error pertama di sebuah file. Satu tipe yang salah di atas sering memicu rentetan error di bawahnya yang hilang sendiri setelah diperbaiki.
3. Hover di editor untuk melihat tipe yang di-infer. Seringkali masalahnya adalah tipe yang "menjadi" sesuatu yang tidak kamu duga, misalnya useState(null) yang terkunci null.
4. Sederhanakan: kalau error melibatkan generic bertingkat, pecah jadi variabel dengan annotation eksplisit per langkah. Error pada tipe bernama jauh lebih mudah dibaca daripada error pada tipe anonim raksasa.
5. Jangan as unknown as X untuk lolos. Itu mematikan alarm, bukan memperbaiki kebakaran.

Catatan teknis: Kadang error menunjuk ke file .d.ts library, bukan kodemu. Itu biasanya berarti versi @types tidak cocok dengan versi library, atau kamu memakai API yang memang tidak diketik dengan benar oleh library-nya. Cek versi types-nya dulu (npm ls @types/react misalnya) sebelum menyalahkan kodemu sendiri.