TypeScript DOM Types

How it works

A collection confirmation uses a button and a status paragraph. instanceof checks both presence and the expected runtime element kind. This is more robust than asserting a query result to HTMLButtonElement and hoping the markup stays correct. The downloaded HTML is a complete browser fixture; Bhylu’s TypeScript runner is an isolated worker and has no document.

Run the code

This example needs a real browser page and a local bundle. It cannot run in the worker-only playground. Save every download under its shown name in one new folder, run npm install, then npm run build and open index.html. The review compiles the source and exercises the actual browser interaction.

Use npm run check for a separate no-output compiler pass. The supplied project enables strict checking, indexed-access checks and exact optional properties. Node fixtures use Node 22.15.1; React fixtures use React/React DOM 19.3.1. These dependencies are installed only in your new example folder, not into Bhylu’s application.

• lesson.ts
• index.html
• tsconfig.json
• package.json
• build.mjs

Example

const confirmButton = document.getElementById("confirm");
const statusLine = document.getElementById("collection-status");
if (!(confirmButton instanceof HTMLButtonElement) || !(statusLine instanceof HTMLParagraphElement)) throw new Error("Fixture elements missing");
confirmButton.addEventListener("click", () => {
  statusLine.textContent = "Collection confirmed locally";
  confirmButton.disabled = true;
});

Expected result after the documented interaction

Collection confirmed locally

The browser review clicks the real button, checks the status text and verifies that the button becomes disabled. These operations test the compiled TypeScript with actual DOM elements. The fixture is a local interaction example, not durable storage or a server-backed collection receipt.