From 508404cac269130825a06b0f092ac0bdad9dd2df Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Mon, 14 Oct 2019 23:05:17 +0200
Subject: [PATCH] chore(react): Clarify React.Attributes (#38748)

---
 types/react/index.d.ts    |  4 ++++
 types/react/test/index.ts | 23 +++++++++++++++--------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/types/react/index.d.ts b/types/react/index.d.ts
index fc49b20b96..77f651023d 100644
--- a/types/react/index.d.ts
+++ b/types/react/index.d.ts
@@ -85,6 +85,10 @@ declare namespace React {
 
     type ComponentState = any;
 
+    /**
+     * @internal You shouldn't need to use this type since you never see these attributes
+     * inside your component or have to validate them.
+     */
     interface Attributes {
         key?: Key;
     }
diff --git a/types/react/test/index.ts b/types/react/test/index.ts
index 5fae7c22a1..f501e44ce4 100644
--- a/types/react/test/index.ts
+++ b/types/react/test/index.ts
@@ -398,27 +398,34 @@ DOM.div({ ref: node => domNodeRef = node });
 let inputNodeRef: HTMLInputElement | null;
 DOM.input({ ref: node => inputNodeRef = node as HTMLInputElement });
 
-const ForwardingRefComponent = React.forwardRef((props: {}, ref: React.Ref<RefComponent>) => {
-    return React.createElement(RefComponent, { ref });
-});
-
-interface AttributeProps extends React.Attributes {
+interface ForwardingRefComponentProps {
     hello: string;
     world?: string | null;
     foo: number;
 }
 
-const ForwardingRefComponentPropTypes: React.WeakValidationMap<AttributeProps> = {};
+const ForwardingRefComponent = React.forwardRef((props: ForwardingRefComponentProps, ref: React.Ref<RefComponent>) => {
+    return React.createElement(RefComponent, { ref });
+});
+
+const ForwardingRefComponentPropTypes: React.WeakValidationMap<ForwardingRefComponentProps> = {};
 ForwardingRefComponent.propTypes = ForwardingRefComponentPropTypes;
 
 function RefCarryingComponent() {
-    const ref: React.RefObject<RefComponent> = React.createRef();
+    const ref = React.createRef<RefComponent>();
     // Without the explicit type argument, TypeScript infers `{ref: React.RefObject<RefComponent>}`
     // from the second argument because both of the inferences generated by the first argument
     // (both to the `P` in the call signature and the `P` in `defaultProps`) have low priority.
     // Then we get a type error because `ForwardingRefComponent.defaultProps` has the wrong type.
     // Can/should this be fixed somehow?
-    return React.createElement<React.RefAttributes<RefComponent>>(ForwardingRefComponent, { ref });
+    return React.createElement<React.RefAttributes<RefComponent> & ForwardingRefComponentProps>(
+        ForwardingRefComponent,
+        {
+            ref,
+            hello: 'there',
+            foo: 0,
+        },
+    );
 }
 
 //