使用injectIntl​​（）

Question

假设我有一个Card组件，如下所示：

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>
        );
    }
}

现在因为道具我必须使用属性title的

属性。

<Card title="Example" />

我需要使用injectIntl()中的react-intl来包装此组件，因此会注入intl上下文。我这样做：

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);

现在，我可以使用不包含Card属性的title组件。

<Card />

对于typescript编译器来说这似乎没问题。也没有运行时错误。我希望编译器抛出这样的错误：

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

这种行为来自哪里？为什么会这样？如何解决这个问题？

提前谢谢！

Answer 1

TL; DR：您需要安装@types/react-intl包。

react-intl包不使用类型注释，您可以在inject.js的源代码中看到。 injectIntl返回的组件与Card完全不同。 @types/react-intl包中的类型添加了缺少的类型注释。