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:
nullThe 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:
- Property ‘click’ does not exist on type ‘Element’ in TypeScript
- Get the value of an input element using TypeScript
- Check if an element contains a class using typescript
Hello, guys! I hope that my knowledge in HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, Python, MySQL, and npm computer languages may be of use to you. I’m Brent Johnson, a software developer.
Name of the university: HOU
Major: IT
Programming Languages: HTML, CSS, JavaScript, TypeScript, NodeJS, ReactJS, MongoDB, PyThon, MySQL, npm