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

avatar

Borislav Hadzhiev

Mon Mar 28 20222 min read

banner

Photo by Imat Gumilar

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

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