ชนิดข้อมูล DOM ของ lib และ querySelector (การตรวจค่า null อย่างเคร่งครัด)

บทนำ

ชนิดข้อมูลของไลบรารี DOM

// DOM types come from the lib DOM definitions
// Examples: Document, HTMLElement, HTMLInputElement, Event

const title: string = document.title; // Document API
console.log("Title:", title);

ชนิดข้อมูลของ querySelector

const el = document.querySelector("#app");
// el: Element | null with strictNullChecks
console.log("Found?", el !== null);

ตัวตรวจสอบด้วยการส่งกลับก่อน

function mount() {
  const root = document.querySelector("#app");
  if (!root) {
    console.warn("No #app found");
    return; // root is narrowed below only if present
  }
  // root: Element
  root.innerHTML = "<strong>Hello TS + DOM</strong>";
}

mount();

การจำกัดชนิดย่อย

function readInputValue() {
  const input = document.querySelector("#name");
  if (!(input instanceof HTMLInputElement)) {
    return; // not an <input>
  }
  // input: HTMLInputElement
  console.log("value=", input.value);
}

readInputValue();

ข้อควรระวังเกี่ยวกับการยืนยันว่าไม่เป็น null

function bad() {
  const root = document.querySelector("#app")!; // unsafe if #app missing
  // Potential runtime error below if root is actually null
  root.textContent = "unsafe";
}

// Prefer guarded version instead of non-null assertion

ตรวจสอบรูปแบบตัวตรวจสอบ

สรุป