React-intl, use api with Typescript
<p>I would like to use the <code>formatMessage</code> function of the <code>react-intl</code> API to insert a message as placeholder, but I can't figure out the right way to access this function.</p>
<p>Here is a simplified version of what I have:</p>
<pre><code>// index.tsx
&lt;IntlProvider locale={`fr-FR`} messages={messages_fr}&gt;
    &lt;NameForm/&gt;
&lt;/IntlProvider&gt;
</code></pre>
<pre><code>// nameForm.tsx
interface NameFormProps {
    intl?: InjectedIntlProps,
}

export default injectIntl(NameForm);

class NameForm extends React.Component&lt;NameFormProps, {}&gt; {
    render() {
        let namePlaceholder = this.props.intl.formatMessage({
            id: &quot;NAME_PLACEHOLDER&quot;,
            defaultMessage: &quot;name&quot;
        });
        
        return (
            &lt;form&gt;
                &lt;input placeholder={namePlaceholder} type=&quot;text&quot;/&gt;
            &lt;/form&gt;
        );
    }
}
</code></pre>
<p>I used <code>InjectedIntlProps</code> as type of the <code>intl</code> prop, because <code>IntlShape</code> didn't seem to provide a <code>formatMessage</code> method.</p>
<p>I Added a ? to the <code>intl</code> prop because I kept having a <code>Property 'intl' is missing</code> (but isn't <code>injectIntl</code> supposed to return a component without this prop?)</p>
<p>Now it compiles, but when running I get an error <code>Cannot read property 'displayName' of undefined</code>. I guess it's because the default export doesn't have an explicit name).</p>
<p>I feel I'm not going in the right direction, but can't find any example of a typescript/react-intl project.</p>
<p>Thanks for your help!</p>