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.

CreepSore · Accepted Answer · 2021-02-15 13:14:08Z

25

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.

edited Feb 15, 2021 at 13:14

answered Feb 15, 2021 at 12:53

CreepSore

6567 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

T.J. Crowder Over a year ago

Sadly not a lot less typing¹ than the type assertion. This approach is reasonable, but it has the feeling of a workaround. Still, if Event/InputEvent doesn't have a generic type parameter (and it seems not to), I'm not sure what else you'd do. ¹ "typing" in the sense of pressing keys on a keyboard

NullDev Over a year ago

@T.J.Crowder Imo it actually is less typing if you use e in the function body a lot. Doesn't feel like a workaround to me since I explicitly state the type of the parameter. The only "workaround" I could think of, would be accessing this instead of e. Nonetheless, I'm pretty happy with this solution :)

T.J. Crowder Over a year ago

@NullDev - You'd grab target to a local, once. var target = /** @type {HTMLInputElement} */ (e.target); But this & solution is very nearly the same as using a generic type parameter (actually, now I think about it, I'm not sure what the type parameter would offer other than a bit more conciseness), so seems pretty good. :-)

fips Over a year ago

As you mentioned, it just workd with TypeScript, not pure JS only with JSDoc. In this case the trick works on the function, but not when calling it in addEventListener( handleEvent ). Let's assume we want to use target and originalTarget. JSDoc outputs this error on the parameter: Argument of type 'MouseEvent' is not assignable to parameter of type 'MouseEvent & { originalTarget: HTMLInputElement; target: HTMLInputElement; }'. Property 'originalTarget' is missing in type 'MouseEvent' but required in type '{ originalTarget: HTMLInputElement; target: HTMLInputElement; }'.ts(2345)

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related