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

Question

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:

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.

Answer 1

You can write your @param annotation like that:

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

Then you get full support for the correct types:

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.

The ampersand per se is not a jsdoc operator, but one from TypeScript. So this only works out if you keep using TypeScript as your preprocessor. See this for a more detailed explanation.