Как можно указать тип (typeScript) для введенных свойств через withRouter?

Question

Я довольно новичок в TypeScript и пытаюсь создать компонент, заключенный в "withRouter" HOC (через npm-пакет act-router-dom ) для получения реквизитов, таких как match , история и местоположение. Как правильно это сделать? Могу ли я импортировать готовый интерфейс из @ types / Reaction-router-dom ? Ниже моя первая попытка:

import classes from './SomeComponent.module.scss';
import { withRouter } from 'react-router-dom';

interface SomeComponentProps {}

interface WithRouter {
  match: ObjectWithAnyKeys;
  location: ObjectWithAnyKeys;
  history: ObjectWithAnyKeys;
}

interface ObjectWithAnyKeys {
  [s: string]: string;
}

export const SomeComponent: React.FunctionComponent<SomeComponentProps & WithRouter> = ({
  match,
  location,
  history,
}) => {
  return (
    <div className={classes.ReadActivityContainer}>
      {'Some component that uses the router props match, location and history'}
    </div>
  );
};

export default withRouter(SomeComponent as any);

Answer 1

просто импортируйте эти типы реквизитов из lib

import { RouteComponentProps, withRouter } from 'react-router-dom';

чем вы должны сказать, что ваш компонент имеет эти реквизиты

type ownProps = {}
export const SomeComponent: React.FunctionComponent<ownProps & RouteComponentProps> = (props: ownProps & RouteComponentProps) => {
  const history = props.history;
  const match = props.match;
  // ect... all in props
  return (
    <div>
      some component that uses the router props match, location and history
    </div>
  );
};

export default withRouter(SomeComponent);