0Pricing
TypeScript Academy · Урок

Типы lib DOM и querySelector (строгая проверка на null)

Разберитесь с типами lib DOM и безопасно выбирайте элементы с помощью querySelector при включённой строгой проверке на null.

«Типы lib DOM и querySelector (строгая проверка на null)» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 3 уроков всего.

Введение

Цель: безопасно использовать типы библиотеки DOM и querySelector. Сначала вы проверите значение на null, а затем используете уточнённые типы для API элементов.

Типы библиотеки DOM

Библиотека DOM в TS предоставляет типы для глобальных объектов браузера (например, Document, HTMLElement, Event), обеспечивая работу IntelliSense и проверок.

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

querySelector возвращает Element | null. При включённом strictNullChecks необходимо явно обработать случай со значением null.

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

Защитная проверка с ранним возвратом

Выполняйте проверку сразу: проверьте значение на null и верните результат или выбросьте ошибку. После этой проверки переменная в данной ветви не равна 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();

Уточнение подтипа

Уточните тип с помощью instanceof до конкретного подтипа, например HTMLInputElement, чтобы стали доступны API, специфичные для элемента.

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

readInputValue();

Осторожно с утверждением ненулевого значения

Избегайте утверждения ненулевого значения (!), если не уверены абсолютно. Защитные проверки делают выполнение безопаснее.

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

Проверка шаблона защитной проверки

Быстрая проверка: после const el = document.querySelector("#app") при включённых строгих проверках на null какой следующий шаг будет самым безопасным?

Итоги

Итоги: типы DOM обеспечивают работу IntelliSense. querySelector возвращает Element | null; сначала выполните защитную проверку, затем используйте результат. Уточняйте тип с помощью instanceof, чтобы работать с API, специфичными для элемента.

Часто задаваемые вопросы

Урок «Типы lib DOM и querySelector (строгая проверка на null)» бесплатный?

Да — полный текст урока «Типы lib DOM и querySelector (строгая проверка на null)» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 3 уроков всего.

Чему я научусь в уроке «Типы lib DOM и querySelector (строгая проверка на null)»?

Разберитесь с типами lib DOM и безопасно выбирайте элементы с помощью querySelector при включённой строгой проверке на null. Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.

Сколько времени занимает урок «Типы lib DOM и querySelector (строгая проверка на null)»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типы lib DOM и querySelector (строгая проверка на null)
  2. Типы событий, пользовательские события; сужение подтипов HTMLElement
  3. Работа с FormData, URL и URLSearchParams
← Назад к TypeScript Academy