Question

我正在使用react-intl，并且它们具有FormattedNumber组件的TypeScript定义：

scipy.curve_fit

我在我的React组件中使用了这个，它带有一个道具export declare const FormattedNumber: React.FC<UnifiedNumberFormatOptions & CustomFormatConfig & { value: number; }>;，使您可以覆盖FormattedNumber组件的道具：

usdProps

如何在不复制确切的泛型的情况下将组件的props设置为FormattedNumber的泛型？

现在我可以这样做：

<FormattedNumber
  value={numAmount}
  style="currency"
  currency={unit}
  minimumFractionDigits={2}
  maximumFractionDigits={2}
  {...usdProps}
/>

但是我希望它可以直接与FormattedNumbers耦合（伪造示例）：

interface Props {
  usdProps?: UnifiedNumberFormatOptions &
    CustomFormatConfig & {
    value: number;
  };
}

Answer 1

假设类型React.FC<T>取决于其structurally的通用类型参数T（即，它实际上使用T而不是ignoring it），然后您应该可以使用conditional type inference从T中提取React.FC<T>，如下所示：

interface Props {
    usdProps?: typeof FormattedNumber extends React.FC<infer T> ? T : never
}

您可以确认此类型与您的手动版本相同。

好的，希望能有所帮助；祝你好运！

Link to code

Answer 2

您想要提取组件的道具以在您自己的组件中使用它。但是没有办法做到这一点。

由于使用通用类型<UnifiedNumberFormatOptions & CustomFormatConfig & { value: number; }>声明道具，因此如果要使用它，则需要以相同的方式声明。

要实现相同的结果，您可以将其声明为类型：

type FormattedNumberProps = UnifiedNumberFormatOptions & CustomFormatConfig & { value: number; };

并在您的界面上使用它：

interface Props {
  usdProps?: FormattedNumberProps;
}

使用const的泛型作为接口

2 个答案: