web-dev-qa-db-fra.com

React HOC et TypeScript 3.2

Alors que TypeScript améliore sa vérification de type JSX dans la version 3.2, nous avons maintenant un problème pour taper correctement nos HOC.

Quelqu'un peut-il corriger des types dans le HOC suivant pour 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" />;
  }
}

Erreur TypeScript:

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

Fondamentalement, l'idée est de transformer le composant qui nécessite une propriété "personnalisée" en composant, qui n'en a plus besoin car il sera injecté automatiquement par HOC.

EDIT: Probablement le même problème: https://github.com/Microsoft/TypeScript/issues/28748

javascriptreactjstypescripthigher-order-components
26
Deftomat

Je suis sûr que ce n'est pas la réponse que vous espériez, mais vous pouvez le faire fonctionner en changeant le type de props dans la fonction interne en any, et en mettant le Omit tapez dans l'annotation de type de retour de la fonction externe, comme ceci:

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