Extend component props with props from react router and react i18n with react typescript

react-ts-router-translation-props.js

import { WithTranslation, withTranslation, useTranslation } from 'react-i18next';
import { RouteComponentProps, withRouter } from 'react-router-dom';

export type MyDemoProps = {} & RouteComponentProps & WithTranslation;
  
function MyDemoComponent({
  history,
  t,
}: MyDemoProps) {
  const [t] = useTranslation(); //alternatively, import translation function directly into component
  return <div>DEMO COMPONENT</div>
}

export const MyDemo = withTranslation()(
  withRouter(MyDemoComponent),
);