Question

我一直在转换为TypeScript的项目大量使用react-intl，它在DefinitelyTyped上有可用的类型。

react-intl可以用几种不同的方式使用，但它在这个项目中使用的方式通常是这样的：

// greeter.js module
import {injectIntl} from 'react-intl'

function Greeter ({intl}) {
  <p>{intl.formatMessage({id: 'greetingStringId'})</p>
}

export default injectIntl(Greeter)

，这将被简单地用作：

<Greeter />

问题是，鉴于我正在逐步转换这个项目，如果我在转换使用它的模块之前没有转换Greeter模块，TypeScript会推断intl属性是必需的，因为我没有直接传递它（但它被injectIntl注入）它抱怨intl属性不存在。

到目前为止，我已经能够在转换使用它们的模块之前先转换这些模块（通过在该属性上使用ReactIntl.InjectedIntl类型）：

// greeter.tsx module
import {injectIntl} from 'react-intl'

interface Props {
  intl?: ReactIntl.InjectedIntl
}

function Greeter ({intl}: Props): JSX.Element {
  <p>{intl.formatMessage({id: 'greetingStringId'})</p>
}

export default injectIntl(Greeter)

现在我的主要问题是：将intl属性作为道具定义中的可选属性保持正确的做法，还是有更正确的方法来处理这种情况？

Answer 1

尝试使用InjectedIntlProps（来自react-intl）将intl添加到props中，如下所示：

interface Props {
    foo: any;
}

function Greeter (props: Props & InjectedIntlProps): JSX.Element {
   <p>{props.intl.formatMessage({id: 'greetingStringId'})</p>
}

或者，使用InjectedIntlProps扩展接口：

interface Props extends InjectedIntlProps {
    foo: any;
}

function Greeter (props: Props): JSX.Element {
   <p>{props.intl.formatMessage({id: 'greetingStringId'})</p>
}

TypeScript注释具有来自react-intl的注入属性的React组件：我这样做了吗？

1 个答案: