DOM & Event Types

TypeScript's DOM types give every element and event a precise shape — from HTMLInputElement to MouseEvent — so querySelector , addEventListener , and event handlers are fully checked and autocompleted.

Learn DOM & Event Types in our free TypeScript course — an interactive lesson with runnable examples, a practice exercise and a quick reference.

Part of the free TypeScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn

💡 Real-World Analogy

Think of the DOM as a building full of labelled rooms. querySelector is asking the receptionist for a room by name — they might hand you a key (the element) or shrug because it doesn't exist ( null ). Telling them "I want the input room" (the generic) means the key fits an input's locks specifically. Events are messages slipped under the door: a "click" note carries coordinates, a "keydown" note carries a key — same envelope ( Event ), different contents.

1. Element Types & querySelector Generics

Every DOM element has a precise type — HTMLInputElement , HTMLButtonElement , HTMLCanvasElement , all extending HTMLElement . querySelector takes a generic so you can say which one you expect, and it always returns YourType | null because the element may not be found.

2. Event vs MouseEvent vs KeyboardEvent

Events form a hierarchy : MouseEvent and KeyboardEvent extend the base Event , adding members like clientX or key . When you call addEventListener("click", ...) , TypeScript already knows the handler gets a MouseEvent — no casting needed.

3. Narrowing e.target & Typed Handlers

e.target is deliberately broad — EventTarget | null — because the event could have started on any descendant. To read element properties you narrow it with instanceof (or reach for the more specific e.currentTarget ). The handler-registration pattern itself is captured by a tiny typed event-emitter .

🎯 Your Turn

Narrow an event by its type field, just like you'd narrow a DOM event union. Fill in the two blanks marked ___ , then run it.

Common Errors (and the fix)

• ❌ "Object is possibly 'null'" — you used a querySelector result without checking. ✅ Guard with if (el) or use optional chaining el?.value .
• ❌ "Property 'value' does not exist on type 'Element'" — you didn't specify the element type. ✅ Use querySelector<HTMLInputElement> so .value is known.
• ❌ "Property 'clientX' does not exist on type 'Event'" — your handler is typed as plain Event . ✅ Use the correct event name so TS infers MouseEvent , or narrow.
• ❌ "Property 'value' does not exist on type 'EventTarget'" — e.target is too broad. ✅ if (e.target instanceof HTMLInputElement) before reading it.

Pro Tips

• 💡 Enable the "dom" lib in tsconfig.json ( compilerOptions.lib ) so all element/event types are available.
• 💡 Prefer instanceof over as for e.target — it's a real runtime check, not just a type assertion.
• 💡 Reach for e.currentTarget when you want the element the listener is attached to; it's easier to type than e.target .
• 💡 Use the HTMLElementTagNameMap behind the scenes: querySelector("input") (a tag selector) already infers HTMLInputElement automatically.

📚 Keep Learning

• 📖 TypeScript Handbook — DOM Manipulation
• 📖 Handbook — instanceof Narrowing
• 📖 tsconfig — the "dom" lib option

Frequently Asked Questions

Mini-Challenge: A Typed Handler Map

No blanks this time — just a brief and a starting outline. Build the dispatcher yourself, run it, and check your output against the example in the comments.

🎉 Lesson Complete

• ✅ querySelector<HTMLInputElement> steers the result to a specific element type
• ✅ Element lookups return YourType | null — always handle the null
• ✅ MouseEvent and KeyboardEvent extend Event with extra members
• ✅ addEventListener infers the right event subtype from the event name
• ✅ Narrow e.target ( EventTarget ) with instanceof before using element members
• ✅ Next lesson: Generic Defaults & Inference

Practice quiz

Continue this course

• Previous: Typing Promises & async
• Next: Generic Defaults & Inference

Related lessons

• Union & Intersection Types
• Type Narrowing