Property 'innerText' does not exist on type 'Element' in TS

avatar

Borislav Hadzhiev

Last updated: Mar 22, 2022

banner

Photo from Unsplash

Property 'innerText' does not exist on type 'Element' in TS #

The error "Property 'innerText' does not exist on type 'Element'" occurs when we try to access the innerText property on an element that has a type of Element. To solve the error, use a type assertion to type the element as HTMLElement before accessing the property.

property innertext not exist type element

This is the index.html file for the examples in this article.

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <div id="box">Hello world</div> <script src="./src/index.ts"></script> </body> </html>

And here is an example of how the error occurs in the index.ts file.

src/index.ts
// 👇️ const box: Element | null const box = document.querySelector('#box'); if (box != null) { // ⛔️ Property 'innerText' does not exist on type 'Element'.ts(2339) box.innerText = 'New text'; }

The reason we got the error is that the return type of the document.querySelector method is Element | null and the innerText property doesn't exist in the Element type.

To solve the error, use a type assertion to type the element as an HTMLElement.

src/index.ts
const box = document.querySelector('#box') as HTMLElement | null; if (box != null) { box.innerText = 'New text'; }

If you used the document.getElementsByClassName method, type the collection as HTMLCollectionOf<HTMLElement>.

src/index.ts
// 👇️ with getElementsByClassName // type as HTMLCollectionOf<HTMLElement> const boxes = document.getElementsByClassName( 'box', ) as HTMLCollectionOf<HTMLElement>; for (let i = 0; i < boxes.length; i++) { boxes[i].innerText = 'New Text'; }

Type assertions are used when we have information about the type of a value that TypeScript can't know about.

We effectively tell TypeScript that the box variable stores anHTMLElement or a null value and not to worry about it.

We used a union type to specify that the variable could still be null, because if an HTML element with the provided selector does not exist in the DOM, the querySelector() method returns a null value.

We used a simple if statement that serves as a type guard to make sure the box variable doesn't store a null value before accessing its innerText property.

src/index.ts
const box = document.querySelector('#box') as HTMLElement | null; // 👉️ box has type HTMLElement or null here if (box != null) { // 👉️ box has type HTMLElement here box.innerText = 'New text'; }
TypeScript knows that the box variable has a type of HTMLElement in the if block and allows us to directly access its innerText property.

It's always a best practice to include null in the type assertion because the querySelector method would return null if no element with the provided selector was found.

Conclusion #

The error "Property 'innerText' does not exist on type 'Element'" occurs when we try to access the innerText property on an element that has a type of Element. To solve the error, use a type assertion to type the element as HTMLElement before accessing the property.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.