chore(react): Clarify React.Attributes (#38748)

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;
     }

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,
+        },
+    );
 }
 
 //