2

我有一个 react HoC，它将两个参数（翻译功能和当前语言环境）添加到组件道具中。效果很好。但是我开始用 TypeScript 重写项目，我不知道该怎么做。

我的观点与how-to-handle-props-injected-by-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);
}

“react-intl”中的 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: (key: string) => string; 语言环境：字符串；}' 不可分配给类型 'T'。

TS2322: 类型 'ComponentClass, any> & { WrappedComponent: ComponentType; }' 不可分配给类型 'ComponentType'。类型 'ComponentClass, any> & { WrappedComponent: ComponentType; }' 不可分配给类型 'ComponentClass'。类型“组件，任何，任何>”不可分配给类型“组件”。属性“道具”的类型不兼容。类型 'Readonly<{ children?: ReactNode; }> & Readonly>' 不可分配给类型 'Readonly<{ children?: ReactNode; }> & 只读'。类型 'Readonly<{ children?: ReactNode; }> & Readonly>' 不可分配给类型 'Readonly'。

谁能帮我？

4

0 回答 0