injectIntl​​ 期望类的 props 包含 `intl`

Question

我遇到了React.ComponentClass 类的问题。

我的 TypeScript 版本是 2.4.2 -

我的组件是这样的：

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

interface IBlahProps extends InjectedIntlProps {

}

class BlahBase extends React.Component<IBlahProps> {

}

const Blah = injectIntl(BlahBase);

export default Blah;

这一切都很好。

但是当我像这样使用这个组件时：

render() {
  return <Blah />
}

<Blah /> 在下面的屏幕截图中带有下划线：

[ts] 类型“{}”不可分配给类型

“只读”。类型“{}”中缺少属性“intl”。

进口废话

我如何理解为什么会出现这种情况，我该如何解决？我不想做<Blah intl={intl} />。

injectIntl 的 index.d.ts 如下所示：

function injectIntl<P>(component: ComponentConstructor<P & InjectedIntlProps>, options?: InjectIntlConfig):
        React.ComponentClass<P> & { WrappedComponent: ComponentConstructor<P & InjectedIntlProps> };

我可以通过将接口从扩展 InjectedIntlProps 更改为如下类型来解决此问题：

type IBlahProps = InjectedIntlProps & {

}

但我不知道为什么扩展 InjectedIntlProps 不能解决它。

Answer 1

可能有错别字？

我刚刚使用 typescript 2.9.2 测试了您的示例，对我来说效果很好：

import { injectIntl, InjectedIntl } from "react-intl";

interface IBlahProps  {
  intl: InjectedIntl;
}

class BlahBase extends React.Component<IBlahProps> {

}

const Blah = injectIntl(BlahBase);

请注意const Blah 而不是class Blah