کار با DOM

چگونه تایپ‌اسکریپت به ما در دستکاری امن عناصر HTML کمک می‌کند.

انتخاب امن عناصر

وقتی از `document.getElementById` یا `querySelector` استفاده می‌کنیم، تایپ‌اسکریپت نمی‌تونه مطمئن باشه که اون عنصر حتماً تو صفحه وجود داره. برای همین، تایپی که برمی‌گردونه `HTMLElement | null` هست. ما باید حالت `null` رو مدیریت کنیم.

// تایپ این متغیر هست: HTMLInputElement | null
const myInput = document.getElementById("my-input");

if (myInput) {
  // داخل این if، تایپ‌اسکریپت مطمئنه که myInput وجود داره
  // ولی هنوز نمی‌دونه که این یه اینپوته!
  // برای همین نمی‌تونیم به value دسترسی داشته باشیم
  // console.log(myInput.value); // Error!
}

Type Assertions: "من بهتر می‌دونم!"

گاهی وقتا ما به عنوان برنامه‌نویس، اطلاعات بیشتری از تایپ‌اسکریپت داریم. مثلاً ما مطمئنیم که عنصری با آیدی `my-input` یه تگ `` هست. با Type Assertion (استفاده از کلمه کلیدی `as`) می‌تونیم این اطلاعات رو به کامپایلر بگیم.

const myInput = document.getElementById("my-input") as HTMLInputElement;

// حالا دیگه نیازی به چک کردن null نیست (البته اگه مطمئنیم که عنصر وجود داره)
// و تایپ‌اسکریپت می‌دونه که این عنصر یه .value داره
console.log(myInput.value);

// یه مثال دیگه با querySelector
const myForm = document.querySelector<HTMLFormElement>('.my-form');
myForm?.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log("Form submitted!");
});

تمرین! 🧠

یه تگ `p` با آیدی `counter` و یه دکمه با آیدی `increment-btn` تو HTML بساز. یه اسکریپت تایپ‌اسکریپت بنویس که با هر بار کلیک روی دکمه، عدد داخل تگ `p` رو یکی زیاد کنه.

جواب تمرین

<!-- HTML -->
<p id="counter">0</p>
<button id="increment-btn">افزایش</button>

<!-- TypeScript -->
<script lang="ts">
  const counterElement = document.getElementById('counter') as HTMLParagraphElement;
  const incrementBtn = document.getElementById('increment-btn') as HTMLButtonElement;
  
  let count = 0;

  incrementBtn.addEventListener('click', () => {
    count++;
    counterElement.innerText = count.toString();
  });
</script>

درس قبلی

درس ۹ از ۱۲

درس بعدی: ماژول‌ها