Basta utilizar como um genérico de funções normal, o TypeScript entenderá que se trata de um componente React quando você o chamar.
Assim:
interface Props<T> {
items: T[];
}
// ↓↓↓
function MyComponent<T>(props: Props<T>) {
return (
<>{JSON.stringify(props.items, null, 2)}</>
);
}
Note que você não poderá utilizar uma arrow function utilizando o tipo React.FC
, já que o genérico teria que vir depois. O tipo React.FC
adiciona a propriedade children
de modo implícito. Desse modo, se o seu componente tiver que usar essa prop, basta modificar a interface Props
:
interface Props<T> {
items: T[];
children: React.ReactNode;
}
Para definir o genérico no componente, utilize esta notação:
<MyComponent<string> items={['A', 'B', 'C']} />
<MyComponent<number> items={[1, 2, 3]} />
No final, você terá algo como:
import React from 'react';
interface Props<T> {
items: T[];
}
function MyComponent<T>(props: Props<T>) {
return (
<>{JSON.stringify(props.items, null, 2)}</>
);
}
function MainComponent() {
return (
<>
<MyComponent<string> items={['A', 'B', 'C']} />
<MyComponent<number> items={[1, 2, 3]} />
</>
);
}
Veja funcionando no TypeScript playground.