Definitelytyped: [react-intl] v3 (forwardRef, etc.)

[antoinerousseau]

• [x] I tried using the @types/xxxx package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @bgrieder @cdroulers @gyzerok @tillwolff @LKay @bhouser @kristerkari @formatlos @lukyth @obedm503 @anion155
  
  

---

The types need an upgrade for react-intl v3

https://github.com/formatjs/react-intl/wiki/Upgrade-Guide#300

• injectIntl(MyComponent, { withRef: true }) becomes
  injectIntl(MyComponent, { forwardRef: true })
• add useIntl hook

[leoyli]

New type definition will needed for useIntl hook too.

[leoyli]

FYI, for this hook. Using augmentation, all we need is simply as:

import { InjectedIntlProps } from 'react-intl';

declare module 'react-intl' {
  type intl = InjectedIntlProps['intl'];
  export function useIntl(): [InjectedIntlProps['intl']['formatMessage'], intl] {}
}

[Fenopiu]

  type intl = InjectedIntlProps['intl'];

I've needed to change your solution changing the last line from:
export function useIntl(): [InjectedIntlProps['intl']['formatMessage'], intl] {}
to:
export function useIntl(): [InjectedIntlProps['intl']['formatMessage'], intl];

Your solution give me this error:
A function whose declared type is neither 'void' nor 'any' must return a value.ts(2355).

[leoyli]

@Fenopiu, I was actually using type augmentation by provide function overload, so it kind of work in my setup. And as for the latest v3 beta.7, the API have slightly changed (but finalized), here is something you may want to use instead:

import { InjectedIntlProps } from 'react-intl';

declare module 'react-intl' {
  type intl = InjectedIntlProps['intl'];
  export function useIntl(): intl {}
}

[Fenopiu]

It works even putting the definition in the namespace declaration:
node_modules/@types/react-intl/index.d.ts
declare namespace ReactIntl { ... type intl = InjectedIntlProps['intl']; function useIntl(): [InjectedIntlProps['intl']['formatMessage'], intl]; }

Compiling I receive this error:

Attempted import error: 'addLocaleData' is not exported from 'react-intl'.

The code it breaks is:
import { addLocaleData, IntlProvider, Locale } from "react-intl";

In the d.ts it is there and exportable (like injectIntl)... so it may be a non updated type change or maybe a bug / change in react-intl to discuss there?

[Fenopiu]

addLocaleData v3 #1307
So it have to be modified the d.ts file too.

[leoyli]

For people holding their eyes on this issue, the official package are now fully typed, which means we will have TS typing as the 1st class support from the package itself in v3. No more outdated DT 🎉

Check out their upgrade guide.