typescript - Usar el genérico de un const como una interfaz

Estoy usando react-intl y tienen una definición de TypeScript para un componente FormattedNumber:

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

Estoy utilizando esto en mi componente de React que toma una prop usdProps que te permite sobrescribir las props de un componente FormattedNumber:

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

¿Cómo puedo configurar las props de mi componente para que sean genéricas de FormattedNumber sin copiar ese genérico exacto?

Ahora mismo puedo hacer esto:

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

Pero preferiría que estuviera directamente acoplado a FormattedNumbers (ejemplo falso):

interface Props {
  usdProps?: genericsOf FormattedNumbers;
}

Respuesta #1

Suponiendo que el tipo React.FC<T> depende estructuralmente de su parámetro de tipo genérico T (es decir, que realmente usa T en lugar de ignorarlo), entonces deberías poder usar la inferencia de tipos condicional para extraer T de React.FC<T>, así:

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

Puedes verificar que este tipo es el mismo que tu versión manual.

Está bien, espero que eso ayude; ¡buena suerte!

Enlace al código

Respuesta #2

Quieres extraer las propiedades de un componente para usarlas en tu propio componente. Pero no hay manera de hacer eso.

Dado que las props se declararon usando el tipo genérico <UnifiedNumberFormatOptions & CustomFormatConfig & { value: number; }>, si quieres usarlo necesitas declararlo de la misma manera.

Lo que puedes hacer para lograr el mismo resultado es declararlo como un tipo:

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

y úsalo en tu interfaz:

interface Props {
  usdProps?: FormattedNumberProps;
}