Cara Memperbaiki ‘nilai’ Properti tidak ada pada tipe HTMLElement Error

Dalam Javascript, itu adalah tugas yang cukup umum untuk mendapatkan nilai dari elemen HTML untuk menonton atau memperbarui nilai itu. Dengan mengingat hal itu, mudah untuk membayangkan mengapa itu harus cukup sederhana untuk dicapai dalam TypeScript juga dan, sebagian besar, Anda akan benar dalam berasumsi demikian. Karena itu, selalu ada beberapa jebakan dalam TypeScript dan salah satu masalah yang mungkin Anda hadapi adalah Property 'value' does not exist on type HTMLElement kesalahan.

Masalah

Biasanya Anda akan menggunakan document.getElementById() untuk mengambil elemen HTML dan kemudian .value untuk mengambil nilainya dan, dalam TypeScript, itu masih terjadi. Tetapi Anda mungkin memperhatikan bahwa ketika Anda mencoba ini, Anda mengalami kesalahan yang disebutkan di atas. Misalnya diberikan HTML berikut:

<div>
  <input id="myInput" defaultValue="test" />
</div>




Code language: HTML, XML (xml)

Dengan TypeScript berikut:

const value = document.getElementById("myInput").value;




Code language: JavaScript (javascript)

Anda akan mengalami kesalahan. Alasan untuk ini adalah document.getElemetById() memiliki nilai balik HTMLElement | null. Sebagai tipe, HTMLElement sebenarnya tidak memiliki properti nilai dan null adalah, baik, nol. Jadi bagaimanapun tidak ada nilai sejauh menyangkut TypeScript. Untungnya, ada trik sederhana untuk mengatasi kesalahan ini.

Solusinya

Menggunakan contoh di atas, Anda bisa menggunakan a ketik pernyataan untuk memberi tahu kompiler TypeScript jenis apa yang Anda harapkan dari metode yang Anda gunakan. Jenis pernyataan diimplementasikan dengan sintaks tanda kurung panah atau as sintaks kata kunci seperti yang ditunjukkan pada contoh di bawah ini. Dalam hal ini, karena elemen adalah input, kita dapat menggunakan HTMLInputElement | null untuk memastikan kita dapat menggunakan nilai atau menangani kasus elemen yang sedang null.

const value = (<HTMLInputElement | null>document.getElementById("myInput"))?.value;
Code language: PHP (php)

const value = (document.getElementById("myInput") as HTMLInputElement | null)?.value;
Code language: JavaScript (javascript)

Dalam kedua contoh, perhatikan penggunaan operator rantai opsional. Ini memungkinkan Anda untuk mengakses dengan aman value properti hanya dengan kembali null jika elemen itu sendiri adalah null atau undefined. Ini pada dasarnya akan setara dengan menggunakan if / else penyataan.

Kesimpulan

TypeScript pasti memiliki beberapa peringatan dan jebakan tetapi masih bermanfaat dalam banyak kasus. Dengan latihan (dan panduan bermanfaat seperti ini!), Anda akan siap untuk menguasai versi Javascript ini. Selamat Mengkode!