javascript - React HOC y TypeScript 3.2

reactjs higher-order-components

Question

A medida que TypeScript mejora su comprobación de tipos JSX en v3.2, tenemos un problema para escribir correctamente nuestros HOC ahora.

¿Alguien puede arreglar tipos en el siguiente HOC para TypeScript 3.2?

import { ComponentType } from ''react'';

type Props = { custom: string };
type Omit<T, K extends string> = Pick<T, Exclude<keyof T, K>>;

function hoc<P extends Props>(Component: ComponentType<P>) {
  return (props: Omit<P, keyof Props>) => {
    return <Component {...props} custom="text" />;
  }
}

Error de TypeScript:

Type ''{ custom: string; }'' is not assignable to type ''IntrinsicAttributes & P & { children?: ReactNode; }''.
Property ''custom'' does not exist on type ''IntrinsicAttributes & P & { children?: ReactNode; }''

Básicamente, la idea es transformar el componente que requiere la propiedad "personalizada" en componente, que ya no lo necesita, ya que el HOC lo inyectará automáticamente.

EDITAR: Probablemente el mismo problema: https://github.com/Microsoft/TypeScript/issues/28748

Answer 1

Estoy seguro de que esta no es la respuesta que esperaba, pero puede hacer que funcione cambiando el tipo de props en la función interna a any , y colocando el tipo Omit en la anotación de tipo de retorno de la función externa, como esta:

function hoc<P extends Props>(Component: ComponentType<P>): ComponentType<Omit<P, keyof Props>> {
  return (props: any) => {
    return <Component {...props} custom="text" />;
  }
}