How To Fix “Property ‘#’ does not exist on type ‘EventTarget'” In TypeScript

Property ‘#’ does not exist on type ‘EventTarget’ in TS

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:

Leave a Reply

Your email address will not be published. Required fields are marked *