Typescript React Intl Redux form type mismatch

Question

I want to connect my form to Intl but I am struggling to understand the typescript error. If I change injectIntl<any>, the error disappears. Possibly, I need to pass something there but I don't know what. Could you please take a look what I am doing wrong, perhaps help me understand the error.

Thank you

Code:

import { injectIntl, InjectedIntlProps } from 'react-intl';
import { reduxForm, Field, InjectedFormProps } from 'redux-form';

interface PageProps extends InjectedIntlProps, InjectedFormProps {}

const Page = (props: PageProps): JSX.Element => {
  const { intl: { formatMessage } } = props;
  return (
    <div>
        <form>
             <Field
                    name="date"
                    type="text"
                    component="input"
                    id="date"
                    {...{
                        label: formatMessage({
                            id: '...',
                        }),
                    }}
                />
        </form>
    </div>
  );
};

export default injectIntl(
  reduxForm({
    form: "FormName",
  })(Page),
);

Error:

message: 'Argument of type 'DecoratedComponentClass<{}, Partial>>' is not assignable to parameter of type 'ComponentConstructor> & InjectedIntlProps>'. Type 'DecoratedComponentClass<{}, Partial>>' is not assignable to type 'StatelessComponent> & InjectedIntlProps>'. Type 'DecoratedComponentClass<{}, Partial>>' provides no match for the signature '(props: Partial> & InjectedIntlProps & { children?: ReactNode; }, context?: any): ReactElement | null'.'

fszlin fszlin · Accepted Answer · 2018-04-02T23:01:38

Try injectIntl on the Page.

export default reduxForm({
    form: "FormName",
})(injectIntl(Page));

Typescript React Intl Redux form type mismatch

1 Answers