使用 const 的泛型作为接口

Question

I'm using react-intl and they have a TypeScript definition for a FormattedNumber component:

export declare const FormattedNumber: React.FC<UnifiedNumberFormatOptions & CustomFormatConfig & {
    value: number;
}>;

I'm using this in my React component that takes a prop usdProps allows you to override the props of a FormattedNumber component:

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

How can I set the props of my component to be generic of FormattedNumber without copying that exact generic?

Right now I can do this:

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

But I'd prefer it to be directly coupled to FormattedNumbers (fake example):

interface Props {
  usdProps?: genericsOf FormattedNumbers;
}

Answer 1

Assuming that the type React.FC<T> depends structurally on its generic type parameter T (ie, it actually uses T as opposed to ignoring it ), then you should be able to use conditional type inference to extract T from React.FC<T> , like this:

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

You can verify that this type is the same as your manual version.

Okay, hope that helps; good luck!

Link to code

Answer 2

You want to extract the props of a component to use it in your own component. But there is no way to do that.

Since the props where declared using the generic type <UnifiedNumberFormatOptions & CustomFormatConfig & { value: number; }> <UnifiedNumberFormatOptions & CustomFormatConfig & { value: number; }> if you want to use it you need to declare it the same way.

What you can do to achieve the same result is declare it as a type:

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

and use it on your interface:

interface Props {
  usdProps?: FormattedNumberProps;
}