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

avatar

Borislav Hadzhiev

Last updated: Mar 27, 2022

banner

Photo from Unsplash

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

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

property src 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> <img id="photo" width="400" height="400" src="dog.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: Element | null const image = document.querySelector('#photo'); if (image != null) { // ⛔️ Property 'src' does not exist on type 'Element'.ts(2339) image.src = 'photo.jpg'; }

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

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

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

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

src/index.ts
// 👇️ with getElementsByClassName // type as HTMLCollectionOf<HTMLImageElement> const images = document.getElementsByClassName( 'img', ) as HTMLCollectionOf<HTMLImageElement>; for (let i = 0; i < images.length; i++) { images[i].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 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 image variable doesn't store a null value before accessing its src property.

src/index.ts
const image = document.querySelector('#photo') as HTMLImageElement | null; // 👉️ image has type HTMLImageElement or null here if (image != null) { // 👉️ image has type HTMLImageElement here image.src = 'photo.jpg'; }
TypeScript knows that the image variable has a type of HTMLImageElement in the if block and allows us to directly access its src 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 'src' does not exist on type 'Element'" occurs when we try to access the src property on an element that has a type of Element. 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.