Attribute type checking is lost after wrapping React component with injectIntl()

Question

Let's say I have a component Card, which looks like this:

import * as React from 'react';

interface Props {
    title: string;
}

export class Card extends React.Component<Props, null> {
    public render() {
        return (
            <div>
                {this.props.title}
            </div>
        );
    }
}

Now because of the props I have to use this component with the attribute title.

<Card title="Example" />

I need to wrap this component with injectIntl() from react-intl, so the intl context is injected. I do this like that:

import * as React from 'react';
import {injectIntl} from 'react-intl';

interface Props {
    title: string;
}

class Component extends React.Component<Props, null> {
    // ..
}

export const Card = injectIntl(Component);

Now I can use the Card component without the attribute title.

<Card />

This seems to be just fine for the typescript compiler. There are also no runtime errors. I expected that the compiler throws an error like this:

Property 'title' is missing in type '{}'.

Where does this behavior come from? Why is it like this? How to solve this problem?

Thank you in advance!

Answer 1

TL;DR: You need to install @types/react-intl package.

react-intl package doesn't use type annotations, as you can see in the source of inject.js. Component returned by injectIntl is completely different component than your Card. Types from @types/react-intl package add the missing type annotations.