TypeScript Academy · Oppitunti

lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)

Tutustukaa lib DOM -tyyppeihin ja valitkaa elementtejä turvallisesti querySelectorilla käyttäen tiukkoja null-tarkistuksia.

Oppitunti 1/38 vaihetta

lib DOM -tyypit ja querySelector (tiukat null-tarkistukset) on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/3. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 3 oppituntia.

Johdanto

Tavoite: Käyttäkää DOM-kirjaston tyyppejä ja querySelector-metodia turvallisesti. Tarkistakaa ensin null-arvo ja käyttäkää sen jälkeen rajattuja tyyppejä elementtien APIen kanssa.

Tapahtumatyypit (MouseEvent, KeyboardEvent, InputEvent)
Rajaa target/currentTarget instanceof-operaattorilla
CustomEvent-tapahtumien detail-hyötykuormat

DOM-kirjaston tyypit

TS:n DOM-kirjasto tarjoaa tyypit selaimen globaaleille olioille (esimerkiksi Document, HTMLElement ja Event) ja mahdollistaa IntelliSense-toiminnon sekä tarkistukset.

// 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-tyyppi

querySelector palauttaa tyypin Element | null. Kun strictNullChecks on käytössä, null-tapaus on käsiteltävä erikseen.

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

Aikainen palautustarkistus

Tehkää tarkistus heti: tarkistakaa null ja palautukaa tai heittäkää poikkeus. Tarkistuksen jälkeen muuttuja ei ole kyseisessä haarassa 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();

Alityypin rajaus

Rajaa tyyppiä edelleen instanceof-operaattorilla tiettyyn alityyppiin, kuten HTMLInputElement, jotta elementtikohtaiset API:t ovat käytettävissä.

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

readInputValue();

Non-null-väitteen varoitus

Välttäkää non-null-väitettä (!), ellette ole täysin varmoja. Tarkistukset tekevät suorituksesta turvallisemman.

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

Tarkistusmallin tarkistus

Pikatarkistus: Kun olette suorittaneet const el = document.querySelector("#app")-kutsun strict null -tarkistukset käytössä, mikä on turvallisin seuraava vaihe?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Kertaus: DOM-tyypit mahdollistavat IntelliSense-toiminnon. querySelector palauttaa tyypin Element | null; tehkää tarkistus ensin ja käyttäkää arvoa vasta sen jälkeen. Rajatkaa tyyppiä instanceof-operaattorilla elementtikohtaisia API:eja varten.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)” ilmainen?

Kyllä – oppitunnin ”lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 3 oppituntia.

Mitä opin oppitunnilla ”lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)”?

Tutustukaa lib DOM -tyyppeihin ja valitkaa elementtejä turvallisesti querySelectorilla käyttäen tiukkoja null-tarkistuksia. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/3.

Kuinka kauan ”lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

lib DOM -tyypit ja querySelector (tiukat null-tarkistukset)
Tapahtumatyypit, mukautetut tapahtumat ja HTMLElement-alatyyppien tarkentaminen
FormDatan, URL:n ja URLSearchParamsin käyttö

← Takaisin: TypeScript Academy