Object is possibly null (document.getElementById) in TypeScript – How to fix it?

Object is possibly null (document.getElementById) in TypeScript

Knowing how to solve the error: Object is possibly null (document.getElementById) in TypeScript will help you know more clearly how Typescript works with browsers and how Typescript interacts with HTML elements. So how to do it? Let’s go into detail now.

The reason for the error: Object is possibly null (document.getElementById) in TypeScript

First, you should know that when you are using the document.getElementById method, it can find the element. Then it will return that element. If not, null will be returned.

Example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>Hello From Learn Share IT</h1>
        <button id="btn">Click To Color Text</button>
        <script src="./index.js"></script>
    </body>
</html>
const h3Ele = window.document.querySelector('h3')
console.log(h3Ele)
h3Ele.textContent = 'Hello World'

Output:

null

The error:

Object is possibly 'null'

Here I get an error because my HTML file does not exist h3 element, so null will be returned, and textContent cannot work with null.

So that, Typescript is just simply doing its job and warning you about the big problem can happen.

Example of how errors happen:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
    </head>
    <body>
        <h1>Hello From Learn Share IT</h1>
        <button id="btn">Click To Color Text</button>
        <script src="./index.js"></script>
    </body>
</html>
const btnEle = window.document.querySelector('button')
console.log(btnEle)
btnEle.textContent = 'A Button'

The error:

Object is possibly 'null'

Output:

Although my HTML file has the button element, the error still happens. If you can make sure that your element exists in the file, to solve the error, let’s follow some solutions below.

The solution for this error

Using non-null assertion

With non-null assertion(!), you can mark your element as optional that cannot be null or undefined, so there are not any errors.

Example:

const btnEle = window.document.querySelector('button')!
console.log(btnEle)
btnEle.textContent = 'A Button'

Adding nullable runtime check

You can create code to check if the variable is null so that Typescript won’t complain about it.

Example:

const btnEle = window.document.querySelector("button");
const h1Ele = window.document.querySelector("h1");

// Using if/else statement to check if button element and h1 element exist
if (btnEle && h1Ele) {
    btnEle.addEventListener("click", () => {
        h1Ele.style.color = "green";
    });
}

Output:

Here I use AND operator to check if both the button element and the h1 element are not null, then execute the code logic.

Summary

In this article, I showed you how to solve the error: Object is possibly null (document.getElementById) in TypeScript. You can use non-null assertion if you make sure that exist an element in your HTML file or you can add a runtime nullable check to check if that element exists so that Typescript will be happy.

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *