React Router v4 Querystring HOC in TypeScript

withQueryString.tsx

import * as qs from 'qs';
import * as React from 'react';
import { pick, merge } from 'lodash-es';

import { RouteComponentProps, withRouter } from 'react-router';
import { Subtract } from 'app/types';


interface QueryString {
  [key: string]: string;
}

export interface WithQueryStringProps<S> {
  query: S;
}

type Props<P, S> = Subtract<P, WithQueryStringProps<S>> & RouteComponentProps<{}>;

export const withQueryString = <P extends WithQueryStringProps<S>, S extends { [key: string]: string }>(Component: React.ComponentType<P>, defaultValues: S) => {
  class WithPageQuery extends React.Component<Props<P, S>, Partial<S>> {
    private getValidQuerystring = (search: string): Partial<S> => {
      const queryString: QueryString = qs.parse(search, {
        ignoreQueryPrefix: true,
      });
      const validQueryString = pick(queryString, Object.keys(defaultValues));
      return validQueryString as Partial<S>;
    }

    private getFullQueryString = (s: Partial<S>): S => {
      return merge(defaultValues, s);
    }

    public render() {
      const { history, location, match, ...props } = this.props as RouteComponentProps<{}>
      const validQueryString = this.getValidQuerystring(location.search);
      return (
        <Component
          {...props}
          query={this.getFullQueryString(validQueryString)}
        />
      );
    }
  }
  return withRouter(WithPageQuery)
}