属性类型检查包装阵营组件与injectIntl()
问题描述:
比方说,我有一个组件Card
,它看起来像这样丢失后title
。属性类型检查包装阵营组件与injectIntl()
<Card title="Example" />
我需要从react-intl
包裹与injectIntl()
此组件,所以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 '{}'.
来自哪里这种行为?这是为什么?如何解决这个问题呢?
预先感谢您!
答
TL; DR:您需要安装@types/react-intl包。
react-intl
软件包不使用类型注释,正如您在inject.js的源中所见。由injectIntl
返回的组件与您的Card
完全不同。 @types/react-intl
包中的类型添加缺少的类型注释。
谢谢@Tomáš!你的回答指出我正确的方向。其实我没有安装这些类型,所以在编译时打字稿不知道要验证什么。也许你可以用这个提示更新你的问题? https://www.npmjs.com/package/@types/react-intl – Robin
@Robin答案已更新。接得好!我忘记了Typescript有一个类型注释的外部存储库。 –