When you work with the DOM in TypeScript, you often need to access properties specific to certain element types, such as HTMLInputElement or HTMLButtonElement. Because the DOM API methods like getElementById and querySelector return general types (like HTMLElement or even Element), you must narrow the type before you can safely use properties like value or checked. TypeScript gives you two main tools for this: type assertions and type guards.

A type assertion tells TypeScript to treat a value as a specific type, regardless of what it knows about the value. You use the as keyword for this. For example, if you know for certain that an element is an input, you might write:

const el = document.getElementById("my-input") as HTMLInputElement;
el.value = "Hello!";

This approach is quick, but it comes with risk: if your assumption is wrong and el is not actually an HTMLInputElement, your code will throw a runtime error when you try to access value. Type assertions are best used when you are absolutely certain of the element's type, such as when you control the HTML structure or have already checked it by other means.

A type guard, on the other hand, lets you check the type at runtime before narrowing it. You can use instanceof or check properties like tagName to verify the element type before using its specific properties. This makes your code safer, especially when working with dynamic content or querying elements that may not exist or may not be the expected type.

For example, to safely access the value property of an element that might be an input, you would use a type guard:

const el = document.getElementById("maybe-input");
if (el instanceof HTMLInputElement) {
  el.value = "Checked safely!";
}

Using a type guard means TypeScript will only allow you to use HTMLInputElement properties inside the guarded block. This helps prevent runtime errors and makes your code more robust, especially in larger or more dynamic applications.

When deciding between these two approaches, consider how certain you are about the type of the element. If you are not completely sure, always use a type guard. Reserve type assertions for cases where you have full control and certainty over the DOM structure.