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

avatar

Borislav Hadzhiev

Sun Jun 26 20222 min read

Updated - Sun Jun 26 2022

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 because 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 ran 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.