TypeScript Academy · leksjon

lib DOM-typer og querySelector (strenge null-kontroller)

Forstå lib DOM-typer, og velg elementer på en trygg måte med querySelector ved hjelp av strenge null-kontroller.

Leksjon 1 av 38 trinn

lib DOM-typer og querySelector (strenge null-kontroller) er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 1 av 3. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 3 leksjoner.

Introduksjon

Mål: Bruke lib DOM-typer og querySelector på en trygg måte. De skal først kontrollere om resultatet er null, og deretter bruke avgrensede typer for element-API-er.

DOM lib-typer

TS sin DOM lib tilbyr typer for globale nettleserobjekter (for eksempel Document, HTMLElement og Event) og gir IntelliSense og kontroller.

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

querySelector returnerer Element | null. Med strictNullChecks må null-tilfellet håndteres eksplisitt.

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

Tidlig returvakt

Legg inn en vakt tidlig: kontroller om verdien er null, og returner eller kast en feil. Etter vakten er variabelen ikke-null i den grenen.

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();

Avgrensing til undertype

Avgrens videre med instanceof til en bestemt undertype, for eksempel HTMLInputElement, slik at elementspesifikke API-er blir tilgjengelige.

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

readInputValue();

Forsiktighet med non-null assertion

Unngå non-null assertion (!) med mindre De er helt sikre. Vakter gjør kjøringen tryggere.

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

Kontroll av vaktmønster

Rask kontroll: Hva er det tryggeste neste steget etter const el = document.querySelector("#app") med strenge null-kontroller?

Besvar den i den interaktive leksjonen

Oppsummering

Oppsummering: DOM-typer gir IntelliSense. querySelector returnerer Element | null; legg inn en vakt først, og bruk deretter verdien. Avgrens med instanceof for elementspesifikke API-er.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «lib DOM-typer og querySelector (strenge null-kontroller)» gratis?

Ja – hele teksten i «lib DOM-typer og querySelector (strenge null-kontroller)» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 3 leksjoner.

Hva lærer jeg i «lib DOM-typer og querySelector (strenge null-kontroller)»?

Forstå lib DOM-typer, og velg elementer på en trygg måte med querySelector ved hjelp av strenge null-kontroller. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 3.

Hvor lang tid tar leksjonen «lib DOM-typer og querySelector (strenge null-kontroller)»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

lib DOM-typer og querySelector (strenge null-kontroller)
Hendelsestyper, egendefinerte hendelser og innsnevring av HTMLElement-underklasser
Arbeid med FormData, URL og URLSearchParams

← Tilbake til TypeScript Academy