TypeScript definition for injectIntl does not handle forwarded refs correctly

[TazmanianD]

Current behavior

I have taken the example from the migration guide for using forwardRef (https://github.com/formatjs/react-intl/blob/master/docs/Upgrade-Guide.md#migrate-withref-to-forwardref) and added TypeScript type info to it and the result is a compile error. The code is complaining that the "ref" prop is not allowed.

import React from 'react';
import { injectIntl, WrappedComponentProps } from 'react-intl';

class MyComponent extends React.Component<WrappedComponentProps> {
  doSomething = () => console.log(this.state || null);

  render() {
    return <div>Hello World</div>;
  }
}

const MyComponentIntl = injectIntl(MyComponent, { forwardRef: true });

class Parent extends React.Component {
  myComponentRef = React.createRef<MyComponent>();

  componentDidMount() {
    this.myComponentRef.current.doSomething(); // no need to call getWrappedInstance()
  }

  render() {
    return <MyComponentIntl ref={this.myComponentRef} />;
  }
}

Produces the compile error:

Error:(22, 13) TS2322: Type '{ ref: RefObject<MyComponent>; }' is not assignable to type 'IntrinsicAttributes & Pick<WrappedComponentProps<"intl">, never> & { forwardedRef?: Ref<any>; } & { children?: ReactNode; }'.
  Property 'ref' does not exist on type 'IntrinsicAttributes & Pick<WrappedComponentProps<"intl">, never> & { forwardedRef?: Ref<any>; } & { children?: ReactNode; }'.

As a workaround, I can explicitly add the ref to the list of props on the component:

class MyComponent extends React.Component<WrappedComponentProps & { ref: RefObject<MyComponent> }>

Your Environment

Executable	Version
npm ls react-intl	3.1.11
npm ls react	16.9.0
npm ls typescript	3.5.3
npm --version	6.4.1

OS	Version
Windows 10	1809

[longlho]

Thanks for reporting! We'll take a look asap.

[longlho]

@TazmanianD can u try master?

[ikuriban]

Unfortunately it didn't help me.
dialog = React.createRef<ConfirmDialog>();

'ConfirmDialog' refers to a value, but is being used as a type here.

this.dialog.current.handleOpen(...
property handleOpen does not exist on type unknown
....

export default injectIntl(ConfirmDialog, { forwardRef: true });