reactjs - 使用 injectIntl​​() 包装 React 组件后，属性类型检查丢失

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()from包装这个组件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 />

这对于打字稿编译器来说似乎很好。也没有运行时错误。我预计编译器会抛出这样的错误：

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

这种行为从何而来？为什么会这样？如何解决这个问题呢？

先感谢您！

Answer 1

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

react-intl包不使用类型注释，如您在inject.js的源代码中所见。返回的injectIntl组件与您的Card. 包中的类型@types/react-intl添加了缺少的类型注释。