How to create stateless functional components that accept generics? - reactjs

Question

Typescript generics can used to extend interfaces.
interface Sample1<P> {
prop1: P;
}
interface Sample2<P> extends Sample1<P> {
prop2: string;
}
But when I try to create a functional component that uses the generic interface, typescript throws error.
const SampleSFC: React.SFC<Sample2<P>> = () => <div />;
error TS2304: Cannot find name 'P'.
If I replace P with a known type like string the error goes away.
const SampleSFC: React.SFC<Sample2<string>> = () => <div />;
Instead of hard coding type of P, that totally kills the purpose of generics, I want to enable users of SampleSFC to set type of P.
How can I do that? If it's not possible then what alternate design I should follow that would let me have SFC with generic props.

Answer 1

Generic type variables can be used in function and type declarations like your interfaces Sample1 and Sample2.
But when you actually use/call/invoke generic types, you have to specify a concrete type argument instead of P.
React.SFC - the stateless function component type - is an interface declaration, so using it in an const assignment requires a concrete type for P.
The only solution that comes to my mind is to make the SFC look like a function type for the ts-compiler, since function declarations/expressions can
be assigned generic type parameters. See Typescript docs for some examples.
Generic SFC declaration
Leave out the React.SFC type annotation to your assignment const SampleSFC:
const SampleSFC = <P extends {}>(props: Sample2<P>) => <div>{props.prop1} </div>;
Note: The <P extends {}> part is needed due to JSX/TSX compatibility
issues with generics, see the end of this post.
This way, your component remains a plain function. If you need the additional members from React.SFC, add them to your props. E.g. if children needed:
const SampleSFC = <P extends {}>(props: Sample2<P> & { children?: ReactNode })
=> <div >{props.prop1} </div>;
Generic SFC usage
Since Typescript 2.9, the type parameter can be directly set in JSX.
const MyApp: React.SFC<{}> = (props) => {
return <SampleSFC<number> prop2="myString" prop1={1} />
}
Alternatives
1.) A switch to class components would be easy, if you don't like the quirks.
class SampleSFCClass<P> extends React.Component<Sample2<P>> {
render() {
return <div>{this.props.prop1}</div>
}
}
const MyApp2: React.SFC<{}> = (props) => {
return <SampleSFCClass<number> prop2="myString" prop1={1} />
}
2.) You could even wrap the SFC in another function.
const withGeneric: <P>() => React.SFC<Sample2<P>> = <P extends {}>() => {
return (props) => <div> {props.prop1} {props.prop2} </div>;
}
const SampleSFCCalled: React.SFC<Sample2<string>> = withGeneric<string>();
const MyApp: React.SFC<{}> = (props) => {
return <SampleSFCCalled prop2="myString" prop1="aString" />
}
It will work, but disadvantage might be slight performance decrease, because the SFC funtion is always recreated in each render cycle of the parent comp.
JSX/TSX compatibility issues with Generics:
In some constellations Typescript seems to have problems parsing generics in combination with JSX/TSX (up to most recent 3.0.1) due to ambiguous syntax. Compile error will then be:
"JSX element has no corresponding closing tag."
One of the contributors recommended to use the function syntax in this case (see issue).
When you stick to arrow function, workaround is to let the type parameter extend from object (shown here or here) to clarify its meant to be a generic lambda and not a JSX tag:
<P extends {}> or <P extends object>
Hope, that helps.

Answer 2

Generics only work within generic types. So when you are declaring a type interface Sample1<P>, then you can use P as a type within that declaration. However, the concrete type Sample1<P> does not actually exist. Instead P is a placeholder for a type when the Sample1 type is being used.
So using Sample1<P> outside of a generic type definition that also has a generic type argument P does not really work. You can only use actual non-generic types P then.
That’s why Sample1<string> works, because string is a valid value for the type argument P in the Sample1<P> definition.
If you want so have a SampleSFC that works for any type P, then you could create it as a React.SFC<Sample1<any>>:
const SampleSFC: React.SFC<Sample1<any>> = () => <div />;

Answer 3

interface MyComponentProps<T> {
value?: T;
}
export const MyComponent = <T,>(
props: React.PropsWithChildren<MyComponentProps<T>>,
) => {
return (
<View>
{props.children}
<Text>{(props.value as unknown) as string}</Text>
</View>
);
};
then in the render method..
return (
<MyComponent<string> />
)