Nos réalisationsBlogGlossaire

TypeScript React : Comment typer les props pour recevoir un composant en tant que props ?

author
Andréas Hanss · Jun 15, 2022
dev | 1 min
Article image

Sommaire

Lorsque l'on utilise TypeScript avec ReactJS il arrive souvent que l'on souhaite passer en tant que props un composant non instancié. Comment ça marche ? Pour cela il faut définir son type.

React.ComponentType

L'utilisation de React.ComponentType<P> est la bonne méthode.

Ce type est adapté pour accepter un composant de classe (React.ComponentClass<P>) ou un composant de fonction (React.FunctionComponent<P> alias React.FC<P>) qui prend des props définies par l'interface P.

Note annexe :

React.ReactNode et React.ReactElement sont les types pour le JSX retourné par le composant - pas pour un composant appelable, c'est-à-dire non instancié par le JSX ou createElement

Typer les props d'un composant

Il n'est pas recommandé d'utiliser <unknown> en tant que type générique pour les props du composant. Seulement si le composant n'utilise pas de props et que le type {} génère un warning dans votre configuration

Il faut déclarer que le composant nécessite uniquement les props que l'on fournira lorsque l'on instanciera le composant avec React.createElement(Comp) (ou la syntaxe JSX équivalente <Comp/>).

Dans ce cas là il n'y a pas de props attendues, donc ce serait React.ComponentType

1
interface Props {
2
  Comp: React.ComponentType;
3
}
4


5
const MyComp: React.FC<Props> = ({ Comp }) => {
6
  return <Comp />
7
}

On obtient une erreur si on appele Comp sans fournir someKey ! On n'obtient pas cette erreur en appelant React.createElement(Comp) car pour une raison obscure, l'argument props est facultatif.

L'approche JSX est donc à privilégier.