JSDoc: Property 'value' does not exist on type 'EventTarget'

I’m using vanilla JavaScript with TypeScript as pre-processor in combination with JSDoc.
That pretty much works flawlessly, especially in the backend (when using in NodeJS, for instance).

However, when I use it with DOM objects, things get a bit tricky.

For example: Say I have an HTML Input field, I catch the input event and want to access the input’s value with e.target.value:

/**
 * Log data on input
 *
 * @param {Event} e
 */
let handleEvent = function(e){
    console.log(e.target.value);
};

document.getElementById("my-input").addEventListener("input", handleEvent);

This results in a TS warning:

Property ‘value’ does not exist on type ‘EventTarget’

As seen here:

TypeScript Warning

Now my question is, what’s the correct @param annotation?

So far I’ve tried Event, InputEvent and HTMLInputElement.

I don’t want to use Type-Assertion. Instead I’d like to know how to specify it in the functions annotations directly, so I do not have to set @type for each and every occurrence of e.target.value individually as suggested here.

1 thought on “JSDoc: Property 'value' does not exist on type 'EventTarget'”

  1. This is probably what you need:
    1
    Notice the {target: HTMLInputElement}.
    The reason why this works is that you’re basically "extending" the Event class by the new target property – which already exists, so it gets overridden with our new type.

    Reply

Leave a Comment