Add params and location query type args to withRouter (#43566)

* Added missing $filter overload

Added missing $filter overload that allows multiple strings to translate and returns an object

* Added Q query type arg passed to Location

* Fix test

* Formatting

* Added param/query type args to withRouter

* Min TS version 3.5 for Omit type

* lint fix

types/react-router/v3/index.d.ts

@@ -13,7 +13,7 @@
 //                 Christian Gill <https://github.com/gillchristian>
 //                 Roman Nevolin <https://github.com/nulladdict>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-// TypeScript Version: 2.8
+// Minimum TypeScript Version: 3.5
 
 export {
     ChangeHook,

types/react-router/v3/lib/withRouter.d.ts

@@ -7,16 +7,22 @@ interface Options {
     withRef?: boolean;
 }
 
-export interface WithRouterProps {
-    location: Location;
-    params: Params;
+export interface WithRouterProps<P = Params, Q = any> {
+    location: Location<Q>;
+    params: P;
     router: InjectedRouter;
     routes: PlainRoute[];
 }
 
 type ComponentConstructor<P> = ComponentClass<P> | StatelessComponent<P>;
 
-declare function withRouter<P, S>(component: ComponentConstructor<P & WithRouterProps> & S, options?: Options): ComponentClass<P> & S;
-declare function withRouter<P>(component: ComponentConstructor<P & WithRouterProps>, options?: Options): ComponentClass<P>;
+declare function withRouter<P, S>(
+    component: ComponentConstructor<P & WithRouterProps> & S,
+    options?: Options
+): ComponentClass<Omit<P, keyof WithRouterProps>> & S;
+declare function withRouter<P>(
+    component: ComponentConstructor<P & WithRouterProps>,
+    options?: Options
+): ComponentClass<Omit<P, keyof WithRouterProps>>;
 
 export default withRouter;

types/react-router/v3/react-router-tests.tsx

@@ -123,19 +123,39 @@ class UserList extends React.Component<UserListProps & WithRouterProps> {
 
 const UserListWithRouter = withRouter(UserList);
 
+interface AvatarProps {
+    user: string;
+}
+
+const Avatar: React.FunctionComponent<AvatarProps & WithRouterProps> = ({ user, children, location, params, router, routes }) => (
+    <div>{ user }</div>
+);
+
+const AvatarWithRouter = withRouter(Avatar);
+
 type UsersProps = RouteComponentProps<{}, {}>;
 
 class Users extends React.Component<UsersProps> {
 	render() {
 		const { location, params, route, routes, router, routeParams } = this.props;
 		return <div>
-			This is a user list
+			This is a user list (class component with injected router props)
 			<UserListWithRouter users="Suzanne, Fred" />
+
+            This is an avatar (function component with injected router props)
+            <AvatarWithRouter user="Joe" />
 		</div>;
 	}
 }
 
-type UserProps = RouteComponentProps<{ id: string }, {}, { }, { search: string }>;
+interface UserParams {
+    id: string;
+}
+interface UserQuery {
+    search: string;
+}
+
+type UserProps = RouteComponentProps<UserParams, {}, {}, UserQuery>;
 
 class User extends React.Component<UserProps> {
     render() {
@@ -214,6 +234,6 @@ const CreateHref: React.SFC<WithRouterProps> = ({ router }) => (
 	</div>
 );
 
-const CreateHrefWithRouter = withRouter<{}>(CreateHref);
+const CreateHrefWithRouter = withRouter(CreateHref);
 
 ReactDOM.render(<CreateHrefWithRouter />, document.body);