Fix Property Not Existing On Eventtarget Typescript

Kamu sedang nulis event handler di TypeScript:

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value); // Error di sini
}

Dan dapat error: Property 'value' does not exist on type 'EventTarget'.

Kenapa terjadi

Tipe Event di TypeScript bersifat generic. Properti target di-typed sebagai EventTarget, yang hanya punya properti dasar seperti addEventListener, removeEventListener, dll. TypeScript tidak tau bahwa target sebenarnya elemen <input> dengan value, checked, dll.

Solusinya

Opsi 1: Pakai tipe event yang benar

Untuk form input, gunakan tipe event yang spesifik:

// Untuk input/textarea
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

// Untuk checkbox
function handleCheck(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.checked);
}

// Untuk select
function handleSelect(event: React.ChangeEvent<HTMLSelectElement>) {
  console.log(event.target.value);
}

Opsi 2: Cast targetnya

Kalau butuh lebih banyak kontrol:

function handleChange(event: React.FormEvent<HTMLInputElement>) {
  const value = (event.target as HTMLInputElement).value;
  console.log(value);
}

Option 3: Type guard (kalau pakai native events)

function handleClick(event: MouseEvent) {
  const target = event.target as HTMLElement;
  console.log(target.tagName);
}

Quick reference

Ingat saja: untuk input, checkbox, dan textarea pakai ChangeEvent<HTMLElement>. Untuk form pakai FormEvent. Itu biasanya cukup.