Property 'src' does not exist on type 'HTMLElement' in TS

avatar

Borislav Hadzhiev

Last updated: Jun 26, 2022

banner

Photo from Unsplash

Property 'src' does not exist on type 'HTMLElement' in TS #

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

property src not exist type htmlelement

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

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <img id="photo" width="200" height="200" src="cat.jpg" /> <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 image = document.getElementById('photo'); if (image != null) { // ⛔️ Property 'src' does not exist on type 'HTMLElement'.ts(2339) image.src = 'photo.jpg'; }

The reason we got the error is that the return type of the document.getElementById method is HTMLElement | null and the src property doesn't exist on the HTMLElement type.

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

src/index.ts
const image = document.getElementById('photo') as HTMLImageElement | null; if (image !== null) { image.src = 'photo.jpg'; }

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 image variable stores anHTMLImageElement 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 id does not exist in the DOM, the getElementById() method returns a null value.

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

src/index.ts
const image = document.getElementById('photo') as HTMLImageElement | null; // 👉️ image has type HTMLImageElement or null here if (image != null) { // 👉️ image has type HTMLImageElement image.src = 'photo.jpg'; }

We explicitly check that the image variable does not store a null value.

The example above uses the loose not equals operator (!=), which checks that the variable is NOT equal to null and undefined.

TypeScript knows that the image variable has a type of HTMLImageElement in the if block and allows us to directly access its src property.

The if block is only run if image does not store a null or undefined value, which is similar to what the optional chaining (?.) operator does.

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

Conclusion #

The error "Property 'src' does not exist on type 'HTMLElement'" occurs when we try to access the src property on an element that has a type of HTMLElement. To solve the error, use a type assertion to type the element as HTMLImageElement 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.