query string HOC for react-router 4

withQueryString.tsx

import * as React from "react";

type HOCWrapped<PWrapped, PHoc> = React.ComponentClass<PWrapped & PHoc> | React.SFC<PWrapped & PHoc>;

const queryString = require("query-string");

import {RouteComponentProps, withRouter} from "react-router";

export interface IQueryStringProps {
    params: any;
}

type IWithQueryStringProps=
    RouteComponentProps<any> &
    IQueryStringProps;

export function withQueryString<P, S>(Component: HOCWrapped<P, IQueryStringProps &
    IQueryStringProps>): React.ComponentClass<P> {

    class C extends React.Component<P & IWithQueryStringProps, S> {

        public render(): JSX.Element {
            
            // don't propagate the react-router props
            const {match, location, history, staticContext, ...rest} = this.props as any;

            const params = queryString.parse(this.props.location.search);

            return (
                <Component params={params} {...rest} />
            );
        }
    }
    return withRouter(C);
}

export default withQueryString;

I hope to get this one written in plain JS with class rather than typescript.