react, react-dom: Enable strictFunctionTypes. (DefinitelyTyped#30748)

Fixes https://stackoverflow.com/q/53298949 .

Author: mattmccutchen

types/react-addons-test-utils/index.d.ts

@@ -160,11 +160,11 @@ declare namespace TestUtils {
         root: Component<any>,
         tagName: string): Element;
 
-    export function scryRenderedComponentsWithType<T extends Component<{}>, C extends ComponentClass<{}>>(
+    export function scryRenderedComponentsWithType<T extends Component<any>, C extends ComponentClass<any>>(
         root: Component<any>,
         type: ClassType<any, T, C>): T[];
 
-    export function findRenderedComponentWithType<T extends Component<{}>, C extends ComponentClass<{}>>(
+    export function findRenderedComponentWithType<T extends Component<any>, C extends ComponentClass<any>>(
         root: Component<any>,
         type: ClassType<any, T, C>): T;
 

types/react-dom/react-dom-tests.tsx

@@ -7,7 +7,7 @@ import * as ReactTestUtils from 'react-dom/test-utils';
 declare function describe(desc: string, f: () => void): void;
 declare function it(desc: string, f: () => void): void;
 
-class TestComponent extends React.Component { }
+class TestComponent extends React.Component<{x: string}> { }
 
 describe('ReactDOM', () => {
     it('render', () => {

types/react-dom/test-utils/index.d.ts

@@ -59,7 +59,7 @@ export interface SyntheticEventData extends OptionalEventProperties {
 export type EventSimulator = (element: Element | Component<any>, eventData?: SyntheticEventData) => void;
 
 export interface MockedComponentClass {
-    new (props: {}): any;
+    new (props: any): any;
 }
 
 export interface ShallowRenderer {
@@ -160,8 +160,12 @@ export function renderIntoDocument<T extends Element>(
     element: DOMElement<any, T>): T;
 export function renderIntoDocument(
     element: SFCElement<any>): void;
-export function renderIntoDocument<T extends Component<any>>(
-    element: CElement<any, T>): T;
+// If we replace `P` with `any` in this overload, then some tests fail because
+// calls to `renderIntoDocument` choose the last overload on the
+// subtype-relation pass and get an undesirably broad return type.  Using `P`
+// allows this overload to match on the subtype-relation pass.
+export function renderIntoDocument<P, T extends Component<P>>(
+    element: CElement<P, T>): T;
 export function renderIntoDocument<P>(
     element: ReactElement<P>): Component<P> | Element | void;
 
@@ -257,7 +261,7 @@ export function findRenderedDOMComponentWithTag(
 /**
  * Finds all instances of components with type equal to `componentClass`.
  */
-export function scryRenderedComponentsWithType<T extends Component, C extends ComponentClass>(
+export function scryRenderedComponentsWithType<T extends Component<any>, C extends ComponentClass<any>>(
     root: Component<any>,
     type: ClassType<any, T, C>): T[];
 
@@ -266,7 +270,7 @@ export function scryRenderedComponentsWithType<T extends Component, C extends Co
  * and returns that one result, or throws exception if there is any other
  * number of matches besides one.
  */
-export function findRenderedComponentWithType<T extends Component, C extends ComponentClass>(
+export function findRenderedComponentWithType<T extends Component<any>, C extends ComponentClass<any>>(
     root: Component<any>,
     type: ClassType<any, T, C>): T;
 

types/react-dom/tsconfig.json

@@ -15,7 +15,7 @@
         "noImplicitAny": true,
         "noImplicitThis": true,
         "strictNullChecks": false,
-        "strictFunctionTypes": false,
+        "strictFunctionTypes": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"

types/react/index.d.ts

@@ -492,8 +492,7 @@ declare namespace React {
      */
     type ClassType<P, T extends Component<P, ComponentState>, C extends ComponentClass<P>> =
         C &
-        (new (props: P, context?: any) => T) &
-        (new (props: P, context?: any) => { props: P });
+        (new (props: P, context?: any) => T);
 
     //
     // Component Specs and Lifecycle

types/react/test/index.ts

@@ -49,6 +49,10 @@ const props: Props & React.ClassAttributes<any> = {
     foo: 42
 };
 
+const scProps: SCProps = {
+    foo: 42
+};
+
 declare const container: Element;
 
 //
@@ -258,9 +262,9 @@ const domFactoryElement: React.DOMElement<React.DOMAttributes<{}>, Element> =
 const element: React.CElement<Props, ModernComponent> = React.createElement(ModernComponent, props);
 const elementNoState: React.CElement<Props, ModernComponentNoState> = React.createElement(ModernComponentNoState, props);
 const elementNullProps: React.CElement<{}, ModernComponentNoPropsAndState> = React.createElement(ModernComponentNoPropsAndState, null);
-const functionComponentElement: React.FunctionComponentElement<SCProps> = React.createElement(FunctionComponent, props);
+const functionComponentElement: React.FunctionComponentElement<SCProps> = React.createElement(FunctionComponent, scProps);
 const functionComponentElementNullProps: React.FunctionComponentElement<SCProps> = React.createElement(FunctionComponent4, null);
-const legacyStatelessComponentElement: React.SFCElement<SCProps> = React.createElement(FunctionComponent, props);
+const legacyStatelessComponentElement: React.SFCElement<SCProps> = React.createElement(FunctionComponent, scProps);
 const legacyStatelessComponentElementNullProps: React.SFCElement<SCProps> = React.createElement(FunctionComponent4, null);
 const domElement: React.DOMElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> = React.createElement("div");
 const domElementNullProps = React.createElement("div", null);
@@ -393,7 +397,12 @@ const ForwardingRefComponent = React.forwardRef((props: {}, ref: React.Ref<RefCo
 
 function RefCarryingComponent() {
     const ref: React.RefObject<RefComponent> = React.createRef();
-    return React.createElement(ForwardingRefComponent, { ref });
+    // 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 });
 }
 
 //
@@ -633,11 +642,11 @@ const foundComponents: ModernComponent[] = TestUtils.scryRenderedComponentsWithT
 
 // ReactTestUtils custom type guards
 
-const emptyElement1: React.ReactElement<{}> = React.createElement(ModernComponent);
+const emptyElement1: React.ReactElement<Props> = React.createElement(ModernComponent);
 if (TestUtils.isElementOfType(emptyElement1, FunctionComponent)) {
     emptyElement1.props.foo;
 }
-const emptyElement2: React.ReactElement<{}> = React.createElement(FunctionComponent);
+const emptyElement2: React.ReactElement<SCProps> = React.createElement(FunctionComponent);
 if (TestUtils.isElementOfType(emptyElement2, FunctionComponent)) {
     emptyElement2.props.foo;
 }

types/react/tsconfig.json

@@ -15,7 +15,7 @@
         "noImplicitAny": true,
         "noImplicitThis": false,
         "strictNullChecks": true,
-        "strictFunctionTypes": false,
+        "strictFunctionTypes": true,
         "baseUrl": "../",
         "typeRoots": [
             "../"