Étant donné le type
type EnumerableComponentFactory = <C, I>(config: {
Container: React.ComponentType<C>;
Item: React.ComponentType<I>;
}) => React.FC<{ items: I[] }>;
avec la mise en œuvre suivante
const Enumerable: EnumerableComponentFactory =
({ Container, Item }) =>
({ items }) =>
(
<Container>
{items.map((props, index) => (
<Item key={index} {...props} />
))}
</Container>
);
et de l'utilisation prévue
const UnorderedList = Enumerable({
Container: ({ children }) => <ul>{children}</ul>,
Item: ({ title }: { title: string }) => <li>{title}</li>,
});
<UnorderedList items=[{title: "Something"}] />
J'observe l'erreur TypeScript suivante
Type '{ children: Element[]; }' is not assignable to type 'C'.
'C' could be instantiated with an arbitrary type which could be unrelated to '{ children: Element[]; }'.ts(2322)
ce qui m'amène à ma question : Quel type de contraintes dois-je mettre en place pour résoudre cette erreur ?
J'ai essayé de changer le type comme suit :
type EnumerableComponentFactory = <C extends { children?: Element[] }, I>(config: {
Container: ComponentType<C>;
Item: ComponentType<I>;
}) => (props: { items: I[] }) => ReturnType<FC<I>>;
mais cela produit un message d'erreur encore plus cryptique, que je vais omettre par souci de concision.
P.S. La fonction elle-même fait exactement ce qui est attendu. C'est juste le compilateur qui se plante.