أنواع DOM

DOM Types

مفهوم ~17 دقيقة

أنواع DOM — DOM Types

في المتصفح، document.querySelector قد يرجع عنصرًا أو null. TypeScript يذكرك بذلك. لا تستخدم العنصر قبل التحقق. وإذا احتجت نوعاً معيناً مثل HTMLInputElement, تحقق أو استخدم selector واضحاً مع guard.

الهدف ليس محاربة TypeScript، بل احترام الحقيقة: قد لا يوجد العنصر في الصفحة. الكود الجيد يتعامل مع ذلك برسالة أو return مبكر.

مثال تمثيلي

index.ts

// استخدم Pick بدلاً من cast — Use Pick instead of cast
function readInputValue(input: Pick<HTMLInputElement, "value"> | null): string {
  if (!input) {
    return "";
  }

  return input.value.trim();
}

// في المتصفح: readInputValue(document.querySelector("input"))
// في الاختبار: تمرير كائن بسيط بدون cast
const fakeInput = { value: " AzLearn " };
console.log(readInputValue(fakeInput));

Output:

Pick<HTMLInputElement, "value"> يصف ما تحتاجه فعلاً دون افتراض أن الكائن هو input كامل. هذا يُمكّن الاختبار بكائنات بسيطة بدون cast خطر.

null جزء من التصميم

لا تكتب ! لإسكات null إلا عندما تكون متأكداً فعلاً. الأفضل شرط واضح.

تحدي — Challenge

function read(input: Pick<HTMLInputElement, "value"> | null): string {
  /* TODO */ return "";
}

console.log(read(null));