This content originally appeared on DEV Community and was authored by Karandeep Singh
Today! We’re going to continue TypeScript learning like you’re a smart 5-year-old who loves to build things and asks “why?” (which is the best thing ever).
& yes “why?” is my way of learning.
I've divided this into 20 Chapters. and will go one by one and each will be of 2 - 3 min. of read.
This is a Continuation. if you have not read the Previous chapter -
Chapter 12
🧩 Chapter 13: Understanding DOM Elements in TypeScript
(aka: How to Make DOM Elements TypeScript safe!)
Imagine you want to grab an <input> field from a webpage, but TypeScript says, “Wait, I’m confused!” 😕 No worries! By the end of this chapter, you’ll know how to tell TypeScript exactly what’s going on🚀
First let's understand, How to explain to TypeScript what kind of element we’re working with. It’s like giving TypeScript a clear instruction manual! 📖.
🤔 What is Type Assertion?
Type Assertion is like saying to TypeScript:
“Hey, I know this is an
<input>element, so let me use itsvalue!”
Two Easy Ways to Do It
Here’s how you can tell TypeScript -
let value = "Karan" as string; // Option 1: Using "as"
OR
let value = <string>"Karan"; // Option 2: Angle brackets
Quick Tip: Use the as way it’s simpler and works better with React/JSX projects. 😊
😕 Understanding, why we get errors?
Let’s say you try to grab an <input> element and get its value -
const input = document.getElementById("myInput");
console.log(input.value); // ❌ ERROR: Property 'value' does not exist on type 'HTMLElement | null'
What’s the problem?
document.getElementById returns HTMLElement | null, which means:
- It could be any HTML element (like
<div>,<span>, etc.). - It could be
nullif the element isn’t found.
TypeScript’s like, “I don’t know if this is an <input> or something else!”
🛠️ Fix 1: Tell TypeScript with Type Assertion
Let’s make it clear for TypeScript:
const input = document.getElementById("myInput") as HTMLInputElement;
console.log(input.value); // ✅ Works perfectly!
By adding as HTMLInputElement, we’re saying, “This is an <input>!” Now TypeScript lets us use properties like value, type, or checked without any issues.
🚨 Fix 2: Handling null Safely
What if getElementById can’t find the element? It returns null, and trying to use .value on null will break your code. Let’s keep things safe:
Option A: Check with if
const el = document.getElementById("myInput");
if (el) {
const input = el as HTMLInputElement;
console.log(input.value); // ✅ Safe and happy
}
Option B: Use Optional Chaining (Quick and Easy)
const input = document.getElementById("myInput") as HTMLInputElement | null;
console.log(input?.value); // ✅ Won’t break if input is null
Quick Tip: The if check is safer, but optional chaining (?.) is great for quick scripts. Pick what feels right! 😄
📋 Your DOM Type Guide Sheet
Here’s a simple list of common HTML elements and their TypeScript types!⚡️ (You don't need to save it, but it'll give you a good understanding of HTML Types)
| HTML Element | TypeScript Type | What It’s For |
|---|---|---|
<input> |
HTMLInputElement |
Text boxes, checkboxes, radios |
<textarea> |
HTMLTextAreaElement |
Big text areas |
<select> |
HTMLSelectElement |
Dropdown menus |
<option> |
HTMLOptionElement |
Choices in a dropdown |
<button> |
HTMLButtonElement |
Clickable buttons |
<form> |
HTMLFormElement |
Forms for user input |
<label> |
HTMLLabelElement |
Labels for form fields |
<img> |
HTMLImageElement |
Pictures |
<a> |
HTMLAnchorElement |
Links |
<div> / <span>
|
HTMLDivElement / HTMLSpanElement
|
Basic containers |
<canvas> |
HTMLCanvasElement |
Drawing or animations |
<video> |
HTMLVideoElement |
Video players |
<audio> |
HTMLAudioElement |
Audio players |
<iframe> |
HTMLIFrameElement |
Embedded content |
<table> |
HTMLTableElement |
Tables |
<tr> |
HTMLTableRowElement |
Table rows |
<td> / <th>
|
HTMLTableCellElement |
Table cells |
<ul> / <ol>
|
HTMLUListElement / HTMLOListElement
|
Lists (bullet or numbered) |
<li> |
HTMLLIElement |
List items |
👉🏻 You can now safely access HTML properties.
Read Previous Chapters
If you enjoyed this and want to master TypeScript and other technologies, follow the series and drop a like!🤝
Bonus Read
How i created my own State Management Library : Rethinking State Management in React — From a Dev, for Developers.
This content originally appeared on DEV Community and was authored by Karandeep Singh
Karandeep Singh | Sciencx (2025-07-26T12:07:20+00:00) Working with HTML Elements in TypeScript: A Complete Guide(13). Retrieved from https://www.scien.cx/2025/07/26/working-with-html-elements-in-typescript-a-complete-guide13/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.