Muhammad Sufiyan's Blog

Handling DOM Elements and Type Assertions in TypeScript

Muhammad Sufiyan's photo
Muhammad Sufiyan
·

2 min read

Fetching DOM Elements with TypeScript

When fetching data through the DOM in TypeScript, you might encounter warnings that the element could be null or undefined. Let's explore this with an example.

Example Code:

const button = document.querySelector('button');
const input1 = document.getElementById("num1");
const input2 = document.getElementById("num2");

function add(num1, num2) {
   return num1 + num2;
}

button.addEventListener('click', () => {
    console.log(input1.value, input2.value);
});

In the code above, TypeScript will show warnings on .value because the elements might be null.

Fixing the Warning:

To fix this, you can use type assertions to tell TypeScript that these elements are not null and are of a specific type.

const input1 = document.getElementById("num1")! as HTMLInputElement;
const input2 = document.getElementById("num2")! as HTMLInputElement;

Adding ! asserts that the element is not null, and as HTMLInputElement specifies the type of the element.

Handling Types:

If you hover over num1, you'll see its type is given as any. To fix the type, define the function with specific types:

function add(num1: number, num2: number): number {
   return num1 + num2;
}

However, this will show an error because the input.value is a string. To resolve this, you need to convert the string to a number:

button.addEventListener('click', () => {
    console.log(+input1.value, +input2.value);
});

Using + before input1.value and input2.value converts the strings to numbers.

TypeScript Overview

TypeScript enhances JavaScript by adding several powerful features:

Key Features of TypeScript:

  1. Types: Adds static types, helping to catch errors early.

  2. Next-gen JavaScript Features: Compiles down for older browsers, ensuring compatibility.

  3. Non-JavaScript Features: Introduces interfaces and generics for better code structuring.

  4. Meta-Programming Features: Supports decorators for advanced programming techniques.

  5. Rich Configuration Options: Offers extensive configuration for various project needs.

  6. Modern Tooling: Enhances the development experience even in non-TypeScript projects.

JavaScriptTypeScript