useKey option with intl.formatMessage method's descriptor parameter lost key property at typescript.

[mgher668]

• version:
  ^3.3.0

• node version:
  v13.8.0

• npm (or yarn) version:
  yarn v1.19.2

Do you want to request a feature or report a bug?:
Maybe a bug.

What is the current behavior?:
My project work with typescript. And I got a TypeScript error at useKey option with intl.formatMessage method's descriptor parameter. Seem the MessageDescriptor interface dose not have a key property . But It worked fine with <FormattedMessage /> component.

Here is my code:

{/* worked fine with FormattedMessage component */}
<p><FormattedMessage key="autoWithComponent" defaultMessage="auto test" /></p>
{/* got Typescript error */}
<p>{intl.formatMessage({key: 'autoWithMethod', defaultMessage: 'auto test'})}</p>

TypeScript error:

No overload matches this call.
  Overload 1 of 2, '(descriptor: MessageDescriptor, values?: Record<string, PrimitiveType> | undefined): string', gave the following error.
    Argument of type '{ key: string; defaultMessage: string; }' is not assignable to parameter of type 'MessageDescriptor'.
      Object literal may only specify known properties, and 'key' does not exist in type 'MessageDescriptor'.
  Overload 2 of 2, '(descriptor: MessageDescriptor, values?: Record<string, string | number | boolean | ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>)> | Date | FormatXMLElementFn<...> | null | undefined> | undefined): string | ReactNodeArray', gave the following error.
    Argument of type '{ key: string; defaultMessage: string; }' is not assignable to parameter of type 'MessageDescriptor'.
      Object literal may only specify known properties, and 'key' does not exist in type 'MessageDescriptor'.  TS2769

    87 |               <p>{intl.formatMessage({id : 'a.hello'})}</p>
    88 |               <p><FormattedMessage key="autoWithComponent" defaultMessage="auto test" /></p>
  > 89 |               <p>{intl.formatMessage({key: 'autoWithMethod', defaultMessage: 'auto test'})}</p>
       |                                       ^
    90 |               <p>{intl.formatMessage({defaultMessage: 'auto test 02'})}</p>
    91 |               <SubmitButton />
    92 |             </div>

What is the expected behavior?:
No typescript errors.
Sorry I am new to typescript. Is that a way to solve this at tsconfig?
Anyway thanks !

Suggested solution:
Not yet.

[akameco]

Currently there is no solution. Please ignore it with @ts-ignore.

      <p>
        {intl.formatMessage({
          // @ts-ignore
          key: 'autoWithMethod',
          defaultMessage: 'auto test',
        })}
      </p>

I will fix it in the future.

[mgher668]

Thanks for your response. I tested the @ts-ignore way. It work. Now I am using <FormattedMessage/> component way instead. It work well. But still looking forward to your fix. Thanks a lot.