Реагировать HoC вводить реквизит с машинописным - PullRequest
0 голосов
/ 20 декабря 2018

У меня есть реагирующий HoC, который добавляет два параметра (функция для перевода и текущую локаль) в реквизиты компонента.Это хорошо работает.Но я начинаю переписывать проект с помощью 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 ​​из "response-intl" есть набрав

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, любой> & {WrappedComponent: ComponentType;} 'нельзя присвоить типу' ComponentClass '.Тип «Компонент, любой, любой>» нельзя назначить типу «Компонент».Типы свойств «реквизит» несовместимы.Введите 'Readonly <{children ?: ReactNode;}> & Readonly> 'нельзя назначить типу «Readonly <{children ?: ReactNode;}> & Readonly '.Введите 'Readonly <{children ?: ReactNode;}> & Readonly> 'нельзя назначить типу «Readonly».

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

...