TS TypeScript · 30 вопросов · ~85 мин · ⏱ Таймер 25:00 · Сложный ·

Типы DOM и браузерных API

Профессиональный тест по теме «Типы DOM и браузерных API»: сложные фрагменты кода, архитектурные компромиссы, диагностика и надёжность. Вопросы требуют читать код, сопоставлять статические гарантии с поведением JavaScript и выбирать решение, которое не рассыплется при развитии проекта.

Отвечено: 0 из 30

⏱ --:--

💡 Инструкция: Выберите один ответ из пяти. На 30 вопросов отведено 85 минут. Код читайте построчно: часть заданий проверяет не результат JavaScript, а то, что TypeScript способен доказать до запуска.

Вопрос 1 из 30

Какой тип возвращает querySelector без конкретного generic?

const node = document.querySelector(".save");

HTMLElement Element | null Node unknown HTMLButtonElement

Вопрос 2 из 30

Как безопасно получить value текстового поля?

const node = document.querySelector("#name");

Проверить typeof node === 'input' Использовать node!.value без условий Привести node as HTMLInputElement Проверить node через instanceof HTMLInputElement Читать textContent как эквивалент value

Вопрос 3 из 30

Что даёт generic querySelector<HTMLButtonElement>?

const button = document.querySelector<HTMLButtonElement>("button.save");

Удаление null из результата Проверку CSS браузером во время компиляции Гарантию существования кнопки Более точный ожидаемый тип HTMLButtonElement | null Автоматическое создание элемента

Вопрос 4 из 30

Когда document.getElementById удобнее querySelector?

Когда требуется NodeList Когда нужен любой псевдокласс Для конкретного id без сложной CSS-логики Когда элемент создаётся на сервере Только в старых браузерах

Вопрос 5 из 30

Почему helper requireElement может быть полезен?

Он ускоряет каждый запрос Он делает DOM неизменяемым Он превращает CSS в тип Он централизует проверку отсутствия обязательного узла Он заставляет браузер дождаться HTML

Вопрос 6 из 30

Почему event.target неудобен для чтения value?

input.addEventListener("input", event => {
  event.target.value;
});

addEventListener удаляет тип элемента value существует только у MouseEvent target всегда Window target — EventTarget | null, возможно вложенный узел Event не содержит target в браузере

Вопрос 7 из 30

Какой объект гарантированно является элементом, на котором зарегистрирован обработчик?

button.addEventListener("click", event => {
  // ...
});

event.target event.view document.activeElement event.currentTarget event.relatedTarget

Вопрос 8 из 30

Как сузить target при делегировании списка?

list.addEventListener("click", event => {
  const target = event.target;
  // ...
});

Привести target к HTMLLIElement без проверки Считать любой Node элементом списка Использовать event.currentTarget как нажатый пункт Проверить Element, найти closest и убедиться, что он внутри list Сравнить typeof target === 'li'

Вопрос 9 из 30

Почему тип события лучше выводить из addEventListener, чем писать Event вручную?

Явная аннотация Event выполняет runtime-проверку Все события имеют одинаковые поля Вывод отключает bubbling Так обработчик становится async Перегрузка связывает имя события с точным типом

Вопрос 10 из 30

Что важно при асинхронном использовании currentTarget?

Нужно клонировать весь Event через JSON Следует использовать target без проверки currentTarget всегда остаётся элементом навсегда Сохранить нужное значение синхронно Асинхронные обработчики запрещены

Вопрос 11 из 30

Почему fetch не отклоняет Promise на HTTP 404?

const response = await fetch("/user/404");

TypeScript подавляет исключение fetch считает 404 успешными данными fetch успешно получает HTTP-ответ Promise отклоняется только при JSON 404 автоматически превращается в null

Вопрос 12 из 30

Какой тип следует считать у response.json до схемы?

const body = await response.json();

Record<string, string> User unknown — до отдельной runtime-проверки Response never

Вопрос 13 из 30

Что произойдёт при повторном чтении body?

const text = await response.text();
const json = await response.json();

Второе чтение вернёт undefined Оба результата будут доступны всегда Response автоматически клонируется Второе чтение обычно завершится ошибкой json прочитает text из кэша TypeScript

Вопрос 14 из 30

Как типизировать обёртку request<T>(), которая просто делает as T после json?

Заменить T на any Добавить JSON.stringify Оставить: generic автоматически проверит сервер Не считать её безопасной Убрать проверку status

Вопрос 15 из 30

Как моделировать отмену запроса?

Использовать только таймер без signal Прерывать Promise через return Передавать boolean cancelled после fetch Считать любую ошибку отменой Принимать AbortSignal и отдельно обрабатывать отмену

Вопрос 16 из 30

Почему non-null assertion здесь хрупок?

const root = document.querySelector("#app")!;
root.replaceChildren(view);

replaceChildren не существует у Element Утверждение замораживает DOM Селекторы id всегда nullable только в TypeScript Оператор ! удаляет элемент Он скрывает отсутствие узла до падения в runtime

Вопрос 17 из 30

Какой эффект у optional chaining?

document.querySelector(".notice")?.remove();

Результат всегда boolean Элемент создаётся и удаляется Отсутствие вызывает TypeError Если элемент отсутствует, операция тихо пропускается Селектор проверяется компилятором

Вопрос 18 из 30

Почему checked нельзя читать у HTMLElement?

const box: HTMLElement = document.getElementById("terms")!;
box.checked;

checked доступен только в CSS getElementById возвращает NodeList checked есть у input, но не у любого HTMLElement Нужно включить esnext lib HTMLElement всегда readonly

Вопрос 19 из 30

Когда optional chaining на DOM-элементе ухудшает диагностику?

Когда вызывается remove Когда элемент действительно необязателен Только в strict: false Когда используется класс Когда отсутствие обязательного узла нельзя игнорировать

Вопрос 20 из 30

Как не повторять проверки одного обязательного элемента по всему коду?

Хранить selector как any Проверить узел при инициализации и передавать точный тип Вызывать querySelector внутри каждой функции Ставить ! при каждом запросе Добавить глобальный HTMLElement без значения

Вопрос 21 из 30

Какую гарантию должен удерживать тест helper-функции requireElement?

function requireElement(selector: string): HTMLElement {
  const node = document.querySelector(selector);
  if (!(node instanceof HTMLElement)) throw new Error(`Missing ${selector}`);
  return node;
}

Селектор по id гарантирует существование узла Результат можно считать HTMLButtonElement для любого селектора Успех возвращает HTMLElement, отсутствие вызывает явную ошибку Helper обязан скрывать все ошибки через optional chaining Тип HTMLElement создаёт узел в документе

Вопрос 22 из 30

Какой отрицательный пример проверяет тип события для input?

declare const input: HTMLInputElement;

Использовать Event и сузить currentTarget KeyboardEvent для события input с @ts-expect-error Прочитать value после проверки HTMLInputElement Зарегистрировать обработчик события input Удалить тот же обработчик с совпадающей функцией

Вопрос 23 из 30

Почему тип querySelector<HTMLButtonElement> не заменяет runtime-проверку?

const button = document.querySelector<HTMLButtonElement>("#save");

HTMLButtonElement всегда равен null без as const querySelector выполняется только при компиляции Типовой аргумент отключает CSS-селектор Generic изменяет тег элемента в HTML Generic не проверяет реальный тип и наличие DOM-узла

Вопрос 24 из 30

После рефакторинга helper стал возвращать Element вместо HTMLInputElement. Что заметит потерю полезной гарантии?

Только тест существования узла Проверка длины CSS-селектора Типовой тест с чтением value без as Снимок innerHTML страницы Runtime-клик без чтения value

Вопрос 25 из 30

Какой набор тестов нужен для делегированного обработчика списка?

Только снимок DOM до события Типовое сужение и клики по вложенным/чужим областям Только сравнение event.type Только один клик по самой кнопке Только проверка компиляции callback

Вопрос 26 из 30

Какой публичный контракт компонента меньше зависит от конкретной разметки?

export interface SearchPanel {
  focusSearch(): void;
  setQuery(value: string): void;
}

Метод focusSearch(), не возвращающий внутренний HTMLInputElement Поле rootInnerHtml: string для прямой замены Свойство searchInput: HTMLInputElement Метод getPrivateNodes(): NodeListOf<Element> Экспорт всех querySelector-результатов

Вопрос 27 из 30

Что здесь является утечкой внутреннего устройства виджета?

export interface DialogController {
  root: HTMLDivElement;
  resizeObserver: ResizeObserver;
  open(): void;
  close(): void;
}

Параметр заголовка string Метод open() Readonly-состояние isOpen Событие onClose Публичные поля root и resizeObserver

Вопрос 28 из 30

Fetch-метод начинает поддерживать отмену и таймаут. Какой контракт проще расширять?

interface LoadOptions { signal?: AbortSignal; timeoutMs?: number; }
declare function loadUser(id: string, options?: LoadOptions): Promise<LoadResult>;

Параметр any с полями по соглашению Глобальная переменная AbortController Options с signal и типизированным результатом ошибок Второй boolean-параметр cancel Возврат null при любой ошибке

Вопрос 29 из 30

Как проверить браузерную совместимость опубликованного DOM-helper?

Отключить target и lib Проверить только Node.js-тест Сравнить имена интерфейсов в редакторе Consumer с нужной lib и тесты в поддерживаемых браузерах Добавить все DOM-типы независимо от поддержки

Вопрос 30 из 30

Какой симптом показывает, что nullable DOM-состояние скрыто слишком агрессивно?

Элемент хранится в readonly-поле querySelector возвращает Element | null Селектор объявлен константой Optional chaining молча пропускает обязательное действие Обработчик использует currentTarget

Ответьте на все 30 вопросов, чтобы получить результат

🔗 Встроить тест на свой сайт (iframe) ▼

Скопируйте код и вставьте в любое место на вашем сайте:

Также доступна прямая ссылка на embed-страницу