You may see the error “Property ‘#’ does not exist on type ‘EventTarget'” in TypeScript when writing code for event handling. It is related to how the compiler anticipates the type of the event target. Read on to learn more in detail.
“Property ‘#’ does not exist on type ‘EventTarget'” In TypeScript
Reproduce the error
In this example, we create a simple HTML page. It has a button that will toggle between the light and dark mode of the page when clicked.
Here is the HTML code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>LearnShareIT Example</title> </head> <body> <h1>Welcome to LearnShareIT</h1> <button id="toggleButton" class="button">Toggle Color!</button> <script src="script.js"></script> </body> </html>
In this index.html
file, we set the ID for the button element to be “toggleButton”
. We use this ID to find the element and listen for its click
event.
This is how many TypeScript developers will write their code:
script.ts:
const button = document.getElementById("toggleButton"); button?.addEventListener( "click", function (e) { document.body.classList.toggle("colored"); console.log(e.target.id, "is clicked!"); }, false );
In this script, we first use the getElementById()
method to get our button element using its ID. This method should return an Element
object representing our button.
We then use the addEventListener()
method to register an event listener. This means we define the function the browser should call when the click
event happens to our target (the button).
The code in the function
will toggle the class of the body element to switch between black and white backgrounds. It also prints a line to the output, indicating the button element has been clicked.
Everything looks good until now. But when you compile the script.ts
file into JavaScript code, the compiler show this error:
$ tsc script.ts
script.ts:3:26 - error TS2339: Property 'id' does not exist on type 'EventTarget'.
3 console.log(e.target.id);
Solution
There are many interfaces whose objects can be event targets. The Element
class, including its children, such as HTMLElement
, is the most common target. However, objects like AudioContext
, AudioNode
, or XMLHttpRequest
can be event targets as well.
The event object uses the property target to indicate the event target. But TypeScript can’t and doesn’t make any assumptions about its type during compilation. That is why it complains about the existence of the id
property and produces the error we have seen.
You will need to use type assertions to tell TypeScript the type you are sure about the event target. You can use the as
keyword for this task:
script.ts:
button?.addEventListener( "click", function (e) { const target = e.target as HTMLButtonElement; document.body.classList.toggle("colored"); console.log(target.id, "is clicked!"); }, false );
In this version, you assign the target
property to a new object and specify its type (HTMLButtonElement
). The compiler will no longer complain about the uncertainty about the existence of the id
property .
Compile the script.ts
file to JavaScript, and the web page should work as expected:
When you click the button, the background color will become black, and the console will display "toggleButton is clicked!"
Summary
The error “Property ‘#’ does not exist on type ‘EventTarget'” in TypeScript typically occurs when the compiler doesn’t know in advance the event target. So it can not recognize properties of your elements, such as id
. Use the type assertion feature of TypeScript to specify the type and solve the problem. You can also use type assertions to fix many errors such as “Type ‘string or undefined’ is not assignable to type string” here and parse JSON files. Thank you for reading!
Maybe you are interested:
- Cannot invoke an object which is possibly ‘undefined’ in TS
- Property does not exist on type Object in TypeScript
- “Tsc Command Not Found” in TypeScript
My name is Robert. I have a degree in information technology and two years of expertise in software development. I’ve come to offer my understanding on programming languages. I hope you find my articles interesting.
Job: Developer
Name of the university: HUST
Major: IT
Programming Languages: Java, C#, C, Javascript, R, Typescript, ReactJs, Laravel, SQL, Python