3

I'm trying to use injectIntl from react-intl with typescript like this (which is in accordance with what I found in answers to other questions):

import { injectIntl, InjectedIntlProps } from "react-intl";

interface Props {
    certificate?: Certificate;
    onCancelClick(event: any): void;
    onDeleteClick(event: any): void;
    onSubmit(certificate: CertificateWritable): Promise<any>;
}

class CertificateForm extends Component<Props & InjectedIntlProps> {
// ... removed for simplicity
}

export default injectIntl<Props>(CertificateForm);

But I'm getting the following error:

Error:(174, 34) TS2345: Argument of type 'typeof CertificateForm' is not assignable to parameter of type 'ComponentType<Props & InjectedIntlProps>'.
  Type 'typeof CertificateForm' is not assignable to type 'ComponentClass<Props & InjectedIntlProps, any>'.
    Types of property 'propTypes' are incompatible.
      Type '{ certificate: Requireable<InferProps<{ [x: string]: Requireable<string> | Validator<ReactText> | Requireable<boolean>; }>>; onCancelClick: Validator<(...args: any[]) => any>; onDeleteClick: Requireable<...>; onSubmit: Validator<...>; }' is not assignable to type 'WeakValidationMap<Props & InjectedIntlProps>'.
        Types of property 'certificate' are incompatible.
          Type 'Requireable<InferProps<{ [x: string]: Requireable<string> | Validator<ReactText> | Requireable<boolean>; }>>' is not assignable to type 'Validator<Certificate | null | undefined>'.
            Types of property '[nominalTypeHack]' are incompatible.
              Type 'InferProps<{ [x: string]: Requireable<string> | Validator<ReactText> | Requireable<boolean>; }> | null | undefined' is not assignable to type 'Certificate | null | undefined'.
                Type 'InferProps<{ [x: string]: Requireable<string> | Validator<ReactText> | Requireable<boolean>; }>' is not assignable to type 'Certificate | null | undefined'.
                  Type 'InferProps<{ [x: string]: Requireable<string> | Validator<ReactText> | Requireable<boolean>; }>' is missing the following properties from type 'Certificate': id, caCertificate, caCertificateKey, domain, and 2 more.

I don't get what I'm doing wrong and how to make it work with TS?

None of the suggested solutions from here work: React-intl, use api with Typescript

I've got @types/react-intl version 2.3.17 installed.

Update: Here's the error message I get if I remove certificate from Props:

Error:(175, 27) TS2345: Argument of type 'typeof CertificateForm' is not assignable to parameter of type 'ComponentType<Props & InjectedIntlProps>'.
  Type 'typeof CertificateForm' is not assignable to type 'ComponentClass<Props & InjectedIntlProps, any>'.
    Types of property 'propTypes' are incompatible.
      Type '{ certificate: Requireable<InferProps<{ [x: string]: Requireable<string> | Validator<ReactText> | Requireable<boolean>; }>>; onCancelClick: Validator<(...args: any[]) => any>; onDeleteClick: Requireable<...>; onSubmit: Validator<...>; }' is not assignable to type 'WeakValidationMap<Props & InjectedIntlProps>'.
        Types of property 'onDeleteClick' are incompatible.
          Type 'Requireable<(...args: any[]) => any>' is not assignable to type 'Validator<(event: any) => void>'.
            Types of property '[nominalTypeHack]' are incompatible.
              Type '((...args: any[]) => any) | null | undefined' is not assignable to type '((event: any) => void) | undefined'.
                Type 'null' is not assignable to type '((event: any) => void) | undefined'.

TypeScript version is 3.3.3333

Jan Kalfus
  • 5,422
  • 2
  • 30
  • 38
  • @cwtuan Thanks for the tip. – Jan Kalfus Apr 23 '19 at 12:33
  • Quick update: I ended up overriding the types using a *.d.ts file. It seems to me like the definition in definitely typed is wrong. – Jan Kalfus Jan 15 '20 at 07:50
  • How did you overriding the types using *.d.ts file, I am having the same issue with Typescript 3.5.x – Jun Q Feb 07 '20 at 23:10
  • @JunQ You can do it like this: https://medium.com/@tomsoir/typescript-how-to-rewrite-type-definition-file-file-d-ts-of-any-node-modules-package-1eed7f5630d1 – Jan Kalfus Feb 08 '20 at 07:48

1 Answers1

0

seems, the problem is not with react-intl. The problem with the incorrect type of certificate prop. Take a look at the Certificate type.

Just, remove certificate from the props and check, whether the issue is disappeared.

Dmitry McLygin
  • 94
  • 2