Property 'X' does not exist on type 'EventTarget' in TS

avatar

Borislav Hadzhiev

Last updated: Mar 28, 2022

banner

Photo from Unsplash

Property 'X' does not exist on type 'EventTarget' in TS #

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

property not exist type eventtarget

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

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <input id="message" type="text" name="message" value="Initial Value" /> <button id="btn">Log files</button> <script src="./src/index.ts"></script> </body> </html>

And here are 2 examples of how the error occurs in the index.ts file.

src/index.ts
const input = document.getElementById('message'); input?.addEventListener('input', event => { console.log(event.target?.value); }); // ---------------------- const btn = document.getElementById('btn'); btn?.addEventListener('click', event => { event.target?.click(); console.log('button clicked'); });

The reason we got the error in the first example is that the EventTarget interface does not contain a value property.

To solve the error, use a type assertion to type the element as HTMLInputElement (or HTMLTextAreaElement if you're working with a textarea element).

Similarly, in the second example, the click() method does not exist on the EventTarget interface, so we have to type the element as HTMLButtonElement.

src/index.ts
const input = document.getElementById('message'); input?.addEventListener('input', event => { // 👇️ use type assertion const target = event.target as HTMLInputElement; console.log(target.value); }); // ---------------------- const btn = document.getElementById('btn'); btn?.addEventListener('click', event => { // 👇️ use type assertion const target = event.target as HTMLButtonElement; target.click(); console.log('button clicked'); });

We assigned the event.target property to a target variable and typed it as an HTMLInputElement so we can access its value property.

The types are consistently named as HTML***Element. Once you start typing HTML.., your IDE should be able to help you with autocomplete.

Some commonly used types are: HTMLInputElement, HTMLButtonElement, HTMLSelectElement, HTMLAnchorElement, HTMLImageElement, HTMLTextAreaElement, etc.

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 target variable stores an HTMLInputElement and not to worry about it.

Conclusion #

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