From 940b36aea403dfb513c8d3c52da3a2d7de2410d1 Mon Sep 17 00:00:00 2001
From: Philip Jackson <p-jackson@live.com>
Date: Tue, 18 Apr 2017 04:08:50 +1200
Subject: [PATCH] React: Use specific event type for nativeEvent property
 (#15610)

* Use specific event type for nativeEvent property

Allows event handlers to fully use the `ev.nativeEvent` property without casting. But it does make the `React.MouseEvent` type slightly more complicated.

* Maintain backwards compatibility of SyntheticEvent type

TypeScript 2.3 should be adding type parameter defaults, which allows the `nativeEvent` property to be made generic but without breaking existing code.

* Override nativeEvent in the more specific event types

Overriding nativeEvent in this way maintains backwards compatibility and doesn't depend on bleeding-edge TypeScript features.
---
 types/react/index.d.ts | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/types/react/index.d.ts b/types/react/index.d.ts
index fbcfc451de..ee1bcefe91 100644
--- a/types/react/index.d.ts
+++ b/types/react/index.d.ts
@@ -4,6 +4,18 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.2
 
+type NativeAnimationEvent = AnimationEvent;
+type NativeClipboardEvent = ClipboardEvent;
+type NativeCompositionEvent = CompositionEvent;
+type NativeDragEvent = DragEvent;
+type NativeFocusEvent = FocusEvent;
+type NativeKeyboardEvent = KeyboardEvent;
+type NativeMouseEvent = MouseEvent;
+type NativeTouchEvent = TouchEvent;
+type NativeTransitionEvent = TransitionEvent;
+type NativeUIEvent = UIEvent;
+type NativeWheelEvent = WheelEvent;
+
 export = React;
 export as namespace React;
 
@@ -295,17 +307,21 @@ declare namespace React {
 
     interface ClipboardEvent<T> extends SyntheticEvent<T> {
         clipboardData: DataTransfer;
+        nativeEvent: NativeClipboardEvent;
     }
 
     interface CompositionEvent<T> extends SyntheticEvent<T> {
         data: string;
+        nativeEvent: NativeCompositionEvent;
     }
 
     interface DragEvent<T> extends MouseEvent<T> {
         dataTransfer: DataTransfer;
+        nativeEvent: NativeDragEvent;
     }
 
     interface FocusEvent<T> extends SyntheticEvent<T> {
+        nativeEvent: NativeFocusEvent;
         relatedTarget: EventTarget;
     }
 
@@ -326,6 +342,7 @@ declare namespace React {
         locale: string;
         location: number;
         metaKey: boolean;
+        nativeEvent: NativeKeyboardEvent;
         repeat: boolean;
         shiftKey: boolean;
         which: number;
@@ -340,6 +357,7 @@ declare namespace React {
         ctrlKey: boolean;
         getModifierState(key: string): boolean;
         metaKey: boolean;
+        nativeEvent: NativeMouseEvent;
         pageX: number;
         pageY: number;
         relatedTarget: EventTarget;
@@ -354,6 +372,7 @@ declare namespace React {
         ctrlKey: boolean;
         getModifierState(key: string): boolean;
         metaKey: boolean;
+        nativeEvent: NativeTouchEvent;
         shiftKey: boolean;
         targetTouches: TouchList;
         touches: TouchList;
@@ -361,6 +380,7 @@ declare namespace React {
 
     interface UIEvent<T> extends SyntheticEvent<T> {
         detail: number;
+        nativeEvent: NativeUIEvent;
         view: AbstractView;
     }
 
@@ -369,18 +389,21 @@ declare namespace React {
         deltaX: number;
         deltaY: number;
         deltaZ: number;
+        nativeEvent: NativeWheelEvent;
     }
 
     interface AnimationEvent<T> extends SyntheticEvent<T> {
         animationName: string;
-        pseudoElement: string;
         elapsedTime: number;
+        nativeEvent: NativeAnimationEvent;
+        pseudoElement: string;
     }
 
     interface TransitionEvent<T> extends SyntheticEvent<T> {
+        elapsedTime: number;
+        nativeEvent: NativeTransitionEvent;
         propertyName: string;
         pseudoElement: string;
-        elapsedTime: number;
     }
 
     //