У меня есть реагирующий 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».
Кто-нибудь может мне помочь?