React HoC вводит реквизиты с машинописным текстом

У меня есть реакция HoC, которая добавляет два параметра (функция для перевода и текущая локаль) в свойства компонента. Это работает хорошо. Но я начинаю переписывать проект на TypeScript и понятия не имею, как это сделать.

Моя точка зрения очень похожа на how-to- handle-props-injected-hoc-in-react-with-typescript. Но у меня есть еще один HoC в моем HoC.

import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl } from 'react-intl';

export function withTranslate(Component) {
  function WithTranslate(props) {
    const { intl, ...compProps } = props;
    const translate = key => {
      return intl.formatMessage({
        id: key
      });
    };

    return <Component {...compProps} t={translate} locale={intl.locale} />;
  }

  WithTranslate.displayName = `withTranslate(${Component.displayName ||
    Component.name}`;
  WithTranslate.propTypes = {
    intl: PropTypes.shape({
      locale: PropTypes.string.isRequired,
      formatMessage: PropTypes.func.isRequired
    }).isRequired
  };
  return injectIntl(WithTranslate);
}

injectIntl ​​из "реагировать-интл" имеют типизацию

interface InjectedIntlProps {
    intl: InjectedIntl;
}

interface InjectIntlConfig {
    intlPropName?: string;
    withRef?: boolean;
}

function injectIntl<P>(component: React.ComponentType<P & InjectedIntlProps>, options?: InjectIntlConfig):
React.ComponentClass<Pick<P, Exclude<keyof P, keyof InjectedIntlProps>>> & { WrappedComponent: React.ComponentType<P & InjectedIntlProps> };

Я пытаюсь сделать это с

interface WithTranslateProps {
  t: (key:string) => string;
  locale: string;
}

export function withTranslate<T extends object>(Component:ComponentType<T & WithTranslateProps>):
  ComponentType<T & WithTranslateProps> {
  function WithTranslate<P>(props:P & InjectedIntlProps) {
    const { intl, ...compProps } = props;
    const translate = (key:string) => {
      return intl.formatMessage({
        id: key
      });
    };

    return <Component {...compProps} t={translate} locale={intl.locale} />;
  }

  WithTranslate.displayName = `withTranslate(${Component.displayName ||
  Component.name}`;

  return injectIntl(WithTranslate);
}

Это не работает.

TS2322: введите '{ t: (ключ: строка) => строка; язык: строка; }» нельзя присвоить типу «T».

TS2322: введите «ComponentClass, any> & { WrappedComponent: ComponentType; }» нельзя присвоить типу «ComponentType». Введите 'ComponentClass, any> & { WrappedComponent: ComponentType; }» нельзя присвоить типу «ComponentClass». Тип «Компонент, любой, любой>» нельзя присвоить типу «Компонент». Типы свойства 'реквизит' несовместимы. Введите «Только для чтения» { дочерние элементы?: ReactNode; }> & Только для чтения>» не может быть назначено для типа «Только для чтения»{ дочерние элементы?: ReactNode; }> & Только для чтения». Введите «Только для чтения» { дочерние элементы?: ReactNode; }> & Readonly>» нельзя назначить типу «Только для чтения».

Может кто-нибудь мне помочь?