React: add typed target for change events

react/index.d.ts

@@ -270,10 +270,9 @@ declare namespace React {
     //
     // Event System
     // ----------------------------------------------------------------------
-
-    interface SyntheticEvent<T> {
+    interface SyntheticEventBase<CURRENT, TARGET> {
         bubbles: boolean;
-        currentTarget: EventTarget & T;
+        currentTarget: EventTarget & CURRENT;
         cancelable: boolean;
         defaultPrevented: boolean;
         eventPhase: number;
@@ -284,12 +283,16 @@ declare namespace React {
         stopPropagation(): void;
         isPropagationStopped(): boolean;
         persist(): void;
-        // If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
-        target: EventTarget;
+        target: EventTarget & TARGET;
         timeStamp: Date;
         type: string;
     }
 
+    interface SyntheticEvent<T> extends SyntheticEventBase<T, EventTarget> {
+      // If you thought target should be `EventTarget & T`,
+      // see https://github.com/DefinitelyTyped/DefinitelyTyped/pull/12239
+    }
+
     interface ClipboardEvent<T> extends SyntheticEvent<T> {
         clipboardData: DataTransfer;
     }
@@ -309,6 +312,9 @@ declare namespace React {
     interface FormEvent<T> extends SyntheticEvent<T> {
     }
 
+    interface ChangeEvent<T> extends SyntheticEventBase<T, T> {
+    }
+
     interface KeyboardEvent<T> extends SyntheticEvent<T> {
         altKey: boolean;
         charCode: number;
@@ -391,6 +397,7 @@ declare namespace React {
     type DragEventHandler<T> = EventHandler<DragEvent<T>>;
     type FocusEventHandler<T> = EventHandler<FocusEvent<T>>;
     type FormEventHandler<T> = EventHandler<FormEvent<T>>;
+    type ChangeEventHandler<T> = EventHandler<ChangeEvent<T>>;
     type KeyboardEventHandler<T> = EventHandler<KeyboardEvent<T>>;
     type MouseEventHandler<T> = EventHandler<MouseEvent<T>>;
     type TouchEventHandler<T> = EventHandler<TouchEvent<T>>;
@@ -458,7 +465,7 @@ declare namespace React {
         onBlurCapture?: FocusEventHandler<T>;
 
         // Form Events
-        onChange?: FormEventHandler<T>;
+        onChange?: ChangeEventHandler<T>;
         onChangeCapture?: FormEventHandler<T>;
         onInput?: FormEventHandler<T>;
         onInputCapture?: FormEventHandler<T>;
@@ -2142,7 +2149,7 @@ declare namespace React {
         unselectable?: boolean;
     }
 
-    // this list is "complete" in that it contains every SVG attribute 
+    // this list is "complete" in that it contains every SVG attribute
     // that React supports, but the types can be improved.
     // Full list here: https://facebook.github.io/react/docs/dom-elements.html
     //

react/test/index.ts

@@ -672,3 +672,19 @@ class ConstructorSpreadArgsPureComponent extends React.PureComponent<{}, {}> {
         super(...args);
     }
 }
+
+//
+// The SyntheticEvent.target.value should be accessible for onChange
+// --------------------------------------------------------------------------
+class SyntheticEventTargetValue extends React.Component<{}, { value: string }> {
+  constructor(props:{}) {
+    super(props);
+    this.state = { value: 'a' };
+  }
+  render() {
+    return React.DOM.textarea({
+      value: this.state.value,
+      onChange: e => this.setState({value: e.target.value})
+    });
+  }
+}