TypeScript: Menangkap Kesalahan Sebelum Sampai Produksi · 7/8

Membaca pesan error TypeScript

Error yang panjang itu terstruktur. Pahami strukturnya dan ia berhenti menakutkan.

Baca 22 menit

Setelah pelajaran ini kamu bisa

Menemukan masalah sebenarnya di pesan error yang panjang
Membaca rantai bersarang "types of property are incompatible"
Memperbaiki error dengan benar alih-alih membungkamnya
Mengetahui tiga jalan keluar darurat dan harganya

Error TypeScript punya reputasi buruk karena panjangnya. Ia tidak acak: ia sebuah jejak dari luar ke dalam. Pahami strukturnya dan ia jadi teks paling berguna di layarmu.

Bentuk dasarnya

text

Type 'string' is not assignable to type 'number'.
     ^^^^^^                          ^^^^^^
     what you gave                   what was wanted

Hampir semua error adalah variasi dari satu kalimat ini. Bacanya: saya menerima yang pertama, saya butuh yang kedua.

Yang panjang: baca dari bawah

Kalau ketidakcocokannya jauh di dalam object bersarang, TypeScript menampilkan setiap lapisan yang dilewatinya. Baris terakhir adalah konflik sebenarnya; semua di atasnya adalah jalur yang ia tempuh untuk sampai ke sana.

text

Argument of type '{ guest: { name: string; age: string; }; }' is not
assignable to parameter of type 'Booking'.
  Types of property 'guest' are incompatible.
    Type '{ name: string; age: string; }' is not assignable to type 'Guest'.
      Types of property 'age' are incompatible.
        Type 'string' is not assignable to type 'number'.
        ^^^^^^^^^^^^^^ THIS is the bug: guest.age is a string, should be number

Empat lapisan konteks, satu masalah sebenarnya. Lompat ke baris terakhir dulu, lalu baca ke atas hanya kalau kamu perlu tahu lokasinya.

Error yang akan terus kamu temui

Pesan	Arti sebenarnya
`'x' is possibly 'undefined'`	Kamu harus menangani kasus tidak ada sebelum memakainya
`Property 'x' does not exist on type`	Salah tulis, atau type-nya lebih sempit dari dugaanmu
`Type 'X' is not assignable to 'never'`	Sebuah union mendapat kasus baru yang belum kamu tangani
`Argument of type 'X' is not assignable`	Type argument salah di sebuah pemanggilan
`'x' is of type 'unknown'`	Persempit dulu dengan sebuah pemeriksaan
`Expected 2 arguments, but got 1`	Ada argument yang kurang, atau signature-nya berubah
`Cannot find name 'x'`	Import belum ada, atau namanya salah tulis
`No overload matches this call`	Ada beberapa signature dan kamu tidak cocok satu pun

Keluarga error possibly 'undefined' layak mendapat catatan sendiri, karena inilah yang paling sering dibungkam developer junior. Ia muncul sebagai 'venue' is possibly 'undefined' untuk value bernama, atau Object is possibly 'undefined' untuk ekspresi seperti rows[i].name. Ini bukan kebisingan — ini compiler memberitahumu bahwa crash nyata mungkin terjadi.

const venue = venues.find((v) => v.id === id);
console.log(venue.name);
//          ~~~~~ 'venue' is possibly 'undefined'.

// Fix 1 - handle it. Usually correct.
if (!venue) return "Not found";
console.log(venue.name);

// Fix 2 - optional chaining, when absent is genuinely fine.
console.log(venue?.name ?? "Unknown");

// Fix 3 - the non-null assertion. "Trust me, it exists."
console.log(venue!.name);
// This does NOTHING at runtime. If it is undefined, you get the exact crash
// the compiler was warning you about, with no warning left behind.

Coba sendiri

Apa yang sebenarnya kamu dapat dari `!`: tidak ada. Ini JS biasa yang akan dihasilkan compiler.

Hasil

Tekan Jalankan untuk melihat hasilnya.

Ini jalan di browser kamu, di dalam sandbox. Apa pun yang kamu tulis di sini tidak bisa merusak situs.

Tiga jalan keluar darurat

Jalan keluar	Harganya	Bisa diterima saat
`value as Type`	Kamu menegaskan; tidak ada yang diverifikasi	Kamu tahu hal yang tidak bisa diketahui compiler, misal setelah validasi
`value!`	Menghapus pemeriksaan undefined sepenuhnya	Jarang — lebih baik pakai guard clause
`// @ts-expect-error`	Mematikan baris berikutnya	Bug library yang sudah diketahui, dengan komentar dan tautan

Tugas praktik

Di scratch.ts, tulis const found = [1,2,3].find(n => n > 5); console.log(found.toFixed(2)); lalu jalankan bunx tsc --noEmit. Perbaiki dengan tiga cara berurutan — guard clause, optional chaining dengan default, dan ! — lalu jalankan masing-masing dengan node scratch.ts. Perhatikan hanya dua yang pertama aman saat tidak ada yang cocok.

Hasil yang diharapkan

Versi `!` lolos compile lalu crash saat runtime.