Correct Usage of React.Events in TypeScript 2.0?

Question

I have an app using React and TypeScript. I recently updated my type definitions to use the npm @types namespace to store them in my node_modules folder.

Previously when working with DOM Events a method signature like this satisfied the type definitions:

public updateValue(e: React.FormEvent): void {

Now However I get compiler errors:

(46,25): error TS2314: Generic type 'FormEvent<T>' requires 1 type argument(s).

And after looking in the react type definitions folder it does indeed take in a generic:

interface FormEvent<T> extends SyntheticEvent<T> {
}

My question is basically what is the use case for this generic, how should it be used and what advantages does it add? I could simply change my method to:

public updateValue(e: React.FormEvent<any>): void {

And this would satisfy the type definition requirement. But what is the intended use case?

You said you're getting that definition from @types? That's surprising, considering that the DefinitelyTyped react.d.ts doesn't have that definition as generic. — Paarth
– Paarth, Commented Oct 17, 2016 at 1:14
@types is pulling from types 2.0 - github.com/DefinitelyTyped/DefinitelyTyped/blob/types-2.0/react/… Not sure if I can aim it at a different repo? — erik-sn
– erik-sn, Commented Oct 17, 2016 at 1:18

Paarth · Accepted Answer · 2016-10-17 01:50:59Z

3

From reading the react.d.ts file you've linked, it looks like that generic parameter corresponds to the HTMLElement specified in the currentTarget property. The Mozilla Docs would indicate this is typically an Element.

[currentTarget: EventTarget & T;]

T remains unspecified up to

interface ReactHTMLElement<T extends HTMLElement> extends DOMElement<HTMLAttributes<T>, T> {

which seems to support the idea that T is an element. I believe the goal of the generic is being able to access element-specific properties (src tags and such using HTMLImageElement, for example) on the currentTarget property. There's an issue that suggests doing something similar in the core lib.d.ts along with some discussions on issues involved.

From what I can tell the react typing is an implementation of that same core idea.

answered Oct 17, 2016 at 1:50

Paarth

10.5k4 gold badges30 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

Correct Usage of React.Events in TypeScript 2.0?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related