TypeScript va DOM: element tiplari

Brauzerda ishlaydigan kodda TypeScript birdan “injiq” bo’lib qoladi. document.querySelector natijasini ishlatmoqchi bo’lsangiz, darhol xato chiqadi.

Bu xato bezovta qiladi, lekin u haq: element sahifada bo’lmasligi mumkin. Bu darsda shu tekshiruvni to’g’ri qondirishni ko’ramiz.

Muammo: element topilmasligi mumkin

const heading = document.querySelector("h1");
heading.textContent = "Yangi sarlavha";

example.ts(2,1): error TS18047: 'heading' is possibly 'null'.

Sabab: querySelector mos element topmasa, null qaytaradi. Uning qaytish tipi shuning uchun Element | null.

DOM darsidagi kod JavaScript’da jim ishlagan edi. Element yo’q bo’lsa esa Cannot set properties of null xatosi bilan sahifa buzilardi. TypeScript aynan shuni oldindan aytmoqda.

Yechim 1: tekshirish

const heading = document.querySelector("h1");

if (heading !== null) {
  heading.textContent = "Yangi sarlavha";
}

if ichida TypeScript heading endi null emasligini biladi. Bu union va literal darsidagi toraytirishning o’zi.

Qisqaroq yozuv — optional chaining:

const form = document.querySelector("form");

form?.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Forma yuborildi");
});

?. element yo’q bo’lsa hech narsa qilmaydi va xato ham chiqmaydi.

Ikkinchi muammo: element tipi juda umumiy

const input = document.querySelector("#search");
console.log(input.value);

Bu safar ikkita xato chiqadi:

example.ts(2,13): error TS18047: 'input' is possibly 'null'.
example.ts(2,19): error TS2339: Property 'value' does not exist on type 'Element'.

Ikkinchisi yangi. querySelector umumiy Element tipini qaytaradi, value esa faqat input elementlarida bo’ladi.

Yechim: tipni burchakli qavsda ko’rsatish

const input = document.querySelector<HTMLInputElement>("#search");

if (input !== null) {
  console.log(input.value);
}

Endi value ruxsat etiladi. querySelector — generik funksiya (generiklar darsidagi kabi), unga kutilayotgan element tipini aytish mumkin.

Ko’p uchraydigan element tiplari:

Teg	Tip
<input>	HTMLInputElement
<button>	HTMLButtonElement
<form>	HTMLFormElement
<a>	HTMLAnchorElement
<img>	HTMLImageElement
<div>	HTMLDivElement
<select>	HTMLSelectElement

Qoida oddiy: HTML + teg nomi + Element.

as bilan tasdiqlash

Ikkinchi yo’l — TypeScript’ga “men bilaman” deyish:

const button = document.getElementById("save") as HTMLButtonElement;
button.disabled = true;

as yozuvi ikki ishni birdan qiladi: tipni aniqlashtiradi va null ehtimolini olib tashlaydi. Shuning uchun tekshiruv kerak bo’lmaydi.

as noto’g’ri ishlatilganda ham himoya qisman saqlanadi:

const input = document.querySelector<HTMLInputElement>("#search");

if (input !== null) {
  console.log(input.value.toFixed(2));
}

example.ts(3,27): error TS2551: Property 'toFixed' does not exist on type 'string'. Did you mean 'fixed'?

input.value doim matn — hatto type="number" bo’lsa ham. Bu JavaScript’dagi klassik tuzoq va TypeScript uni ushlab qoladi.

Ro’yxat bilan ishlash

const items = document.querySelectorAll<HTMLLIElement>("li.item");

items.forEach((item) => {
  console.log(item.textContent);
});

querySelectorAll hech qachon null qaytarmaydi — element topilmasa bo’sh ro’yxat beradi. Shuning uchun bu yerda tekshirish shart emas.

Hodisalar bilan ishlash

Hodisa obyektining tipi ham aniq:

const form = document.querySelector<HTMLFormElement>("#login");

form?.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log("Yuborish to'xtatildi");
});

event ga tip yozilmadi: addEventListener "submit" nomidan uni SubmitEvent deb aniqladi. Hodisa nomini noto’g’ri yozsangiz, TypeScript buni ham aytadi.

event.target va instanceof

event.target tipi umumiy, shuning uchun uni tekshirish kerak:

document.addEventListener("click", (event) => {
  const target = event.target;

  if (target instanceof HTMLButtonElement) {
    console.log("Tugma bosildi:", target.textContent);
  }
});

instanceof tekshiruvidan keyin target — aniq tugma. Hodisa delegatsiyasi darsidagi naqsh TypeScript’da shu tarzda xavfsiz bo’ladi.

strictNullChecks nima qiladi

Bu darsda ko’rgan null tekshiruvlari strictNullChecks sozlamasi tufayli talab qilinadi. U strict: true ichida allaqachon yoqilgan.

O’chirilsa, null har qanday tipga tushaveradi va querySelector natijasini tekshirmasdan ishlatish mumkin bo’ladi.

Amaliy mashq

1. querySelector bilan element toping va uni tekshirmasdan ishlatib TS18047 xatosini chaqiring;
2. Shu kodni if tekshiruvi bilan tuzating;
3. <input> elementini topib, value ni tekshiruvsiz o’qing va ikkala xatoni birdan ko’ring;
4. querySelector<HTMLInputElement> yozuvi bilan tipni aniqlashtiring;
5. input.value ustida toFixed() chaqirib, TS2551 xatosini o’qing va qiymat nega matn ekanini aytib bering;
6. click hodisasida event.target ni instanceof bilan tekshirib, faqat tugma bosilganda xabar chiqaring.

3-qadam eng muhimi: u ikki xil muammoni — null ehtimoli va umumiy element tipi — bir vaqtda ko’rsatadi.

Qisqacha xulosa

• querySelector Element | null qaytaradi, shuning uchun natija tekshiriladi.
• Tekshiruv if yoki ?. bilan bajariladi.
• Umumiy Element tipida value kabi maxsus xossalar yo’q — querySelector<HTMLInputElement> yozuvi kerak.
• Element tipi nomi: HTML + teg nomi + Element.
• as hech narsani tekshirmaydi — u javobgarlikni sizga o’tkazadi.
• input.value doim matn, hatto type="number" bo’lsa ham.
• querySelectorAll null qaytarmaydi; strictNullChecks ni o’chirmang.

Keyingi darsda loyiha sozlash — strict sozlamalari va mavjud JavaScript loyihasini TypeScript’ga ko’chirish.