diff --git a/types/react-router/index.d.ts b/types/react-router/index.d.ts index 89bff722c6..3746fa5c50 100644 --- a/types/react-router/index.d.ts +++ b/types/react-router/index.d.ts @@ -131,10 +131,20 @@ export function matchPath(pathn export function generatePath(pattern: string, params?: { [paramName: string]: string | number | boolean | undefined }): string; +export type WithRouterProps> = C extends React.ComponentClass + ? { wrappedComponentRef?: React.Ref> } + : {}; + +export interface WithRouterStatics> { + WrappedComponent: C; +} + // There is a known issue in TypeScript, which doesn't allow decorators to change the signature of the classes // they are decorating. Due to this, if you are using @withRouter decorator in your code, // you will see a bunch of errors from TypeScript. The current workaround is to use withRouter() as a function call // on a separate line instead of as a decorator. -export function withRouter

>(component: React.ComponentType

): React.ComponentClass>>; +export function withRouter

, C extends React.ComponentType

>( + component: C & React.ComponentType

, +): React.ComponentClass> & WithRouterProps> & WithRouterStatics; export const __RouterContext: React.Context; diff --git a/types/react-router/test/WithRouter.tsx b/types/react-router/test/WithRouter.tsx index 5782b08429..fb895be461 100644 --- a/types/react-router/test/WithRouter.tsx +++ b/types/react-router/test/WithRouter.tsx @@ -17,11 +17,16 @@ class ComponentClass extends React.Component { const WithRouterComponentFunction = withRouter(ComponentFunction); const WithRouterComponentClass = withRouter(ComponentClass); +WithRouterComponentClass.WrappedComponent; // $ExpectType typeof ComponentClass const WithRouterTestFunction = () => ( ); -const WithRouterTestClass = () => ; +const OnWrappedRefFn = (ref: ComponentClass | null) => {}; +const WithRouterTestClass = () => ; + +const OnWrappedRef = React.createRef(); +const WithRouterTestClass2 = () => ; // union props {