'Use react-intl imperative formatMessage with TypeScript?

I want to use formatMessage from react-intl (v5.25.1) for creating a string in order to use them later (in an event callback).

For example this for my message ("hp:single:monthlyPerfTooltip": "AZ letzter Bezugszeitraum: <b>{monthlyVal}</b>",, sorry, German):

const tooltipText = intl.formatMessage({id: 'hp:single:monthlyPerfTooltip'},
    {
         monthlyVal: intl.formatNumber(input.data.valueMonth, {minimumFractionDigits: 2, maximumFractionDigits: 2}),
         b: str => <b>{str}</b>
    });

Does not work: Argument of type 'ReactNode' is not assignable to parameter of type 'string'. Type 'undefined' is not assignable to type 'string'.ts(2345)

But I can see this example in the docs (with rich text formatting):

function () {
  const messages = defineMessages({
    greeting: {
      id: 'app.greeting',
      defaultMessage: 'Hello, <bold>{name}</bold>!',
      description: 'Greeting to welcome the user to the app',
    },
  })

  return intl.formatMessage(messages.greeting, {
    name: 'Eric',
    bold: str => <b>{str}</b>,
  })
}

More versions:

"@types/react-intl": "^3.0.0",
"typescript": "^4.6.3"

What am I doing wrong?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source