React TypeScript - Pass a dynamic generic type into a forwardRef component - reactjs

Question

Core of my question
const FinalComponent<GenericType extends 'a' | 'b'> = is invalid tsx syntax.
// The 1st line here is invalid tsx syntax
const FinalComponent<InvalidGenericType extends 'a' | 'b'> =
forwardRef<HTMLParagraphElement, PropsWithStandardRef<InvalidGenericType>>(({ value }, ref) => {
return <Component forwardedRef={ref} value={value} />
}) as ComponentType<InvalidGenericType>
Intended usage of the component:
const ExampleUsage = () => <FinalComponent<'b'> value="b" />
How do I make a generic type in this situation?
Additional context
For additional context, here is the rest of the code:
import { Ref, forwardRef } from 'react'
// These are the base props for the component.
// In terms of usage, these are the props that I care about.
interface Props<GenericType extends 'a' | 'b'> {
value: GenericType
}
// Adding forwardedRef to the props to define what props are usable inside the component
interface PropsWithForwardRef<GenericType extends 'a' | 'b'> extends Props<GenericType> {
forwardedRef: Ref<HTMLParagraphElement | null>
}
// Adding standard ref to the props to define what props the component can accept from outside
interface PropsWithStandardRef<GenericType extends 'a' | 'b'> extends Props<GenericType> {
ref?: Ref<HTMLParagraphElement | null>
}
// forwardRef is interfering with the inheritance of the generic types.
// This is a stand in for the expected return type of the component.
type ComponentType<GenericType extends 'a' | 'b'> = (props: PropsWithStandardRef<GenericType>) => JSX.Element
// The core component code
function CoreComponent<GenericType extends 'a' | 'b'> ({ value, forwardedRef }:PropsWithForwardRef<GenericType>):JSX.Element {
return <p ref={forwardedRef}>{value}</p>
}
// !!!!!!!!!!! IMPORTANT BIT !!!!!!!!!!!!
// This is where my problem is, I need to be able to pass a dynamic generic type into PropsWithStandardRef and ComponentType.
// I'm not sure how to do that though because `const FinalComponent<InvalidGenericType extends 'a' | 'b'> = forwardRef()` is invalid
const FinalComponent<InvalidGenericType extends 'a' | 'b'> = forwardRef<HTMLParagraphElement, PropsWithStandardRef<InvalidGenericType>>(({ value }, ref) => {
return <CoreComponent forwardedRef={ref} value={value} />
// I need the `as ComponentType<InvalidGenericType>` bit because the inferred type that comes out of forwardRef
// is making TS lose the generic types information
}) as ComponentType<InvalidGenericType>
// This is the end goal of how I want to be able to use this component
// I want to be able to pass a generic type into the component without TS complaining
const ExampleUsage = () => <FinalComponent<'b'> value="b" />
PS. I recognize that this example is a bit contrived, it is for the sake of simplifying my real world problem which features a far more complex component.
Similar but different question
This is different to React Typescript - dynamic types
In that question, it doesn't require passing the type information into the variable, more just changing what the type is based on what values the user provides.
I need the end use of the component to be able to pass a type into it.

Answer 1

Your provided code is very close to working, but there are a just a few things which need to change for type correctness:
Refs which hold HTML elements should not be mutable/nullable, because they are set and managed by React, and the Ref<T> util already includes null anyway. (This is unless you're doing something truly exotic like imperatively manipulating elements outside the render tree... but I've never even seen that in a codebase.) Because of this, I removed null from your union in Ref<HTMLParagraphElement | null>. (This was also causing a problem with passing the value to the actual paragraph element in CoreComponent.)
The return type for your ComponentType needs to include null for the return type of forwardRef to be assignable to it. Speaking of return types for functions which return React elements, JSX.Element is simply an alias to ReactElement with any passed in the type params. I changed the JSX.Element references to ReactElement.
A type annotation can still be applied to a variable that holds a function expression value. It is written the same way any other annotation is written: following the identifier name, like this:
const add: (...numbers: number[]) => number = (...nums) => nums.reduce((sum, n) => sum + n, 0);
The syntax above is not easy to read in my opinion, so I prefer wrapping the type in parentheses for readability. You can even utilize generics with the signature (needed in your case), and overloading is possible as well. See the FinalComponent in your code below, modified:
TS Playground link
import {
default as React,
createRef,
forwardRef,
ReactElement,
Ref,
} from 'react';
type AorB = 'a' | 'b';
type Props<T extends AorB> = { value: T };
type PropsWithForwardRef<T extends AorB> = Props<T> & { forwardedRef: Ref<HTMLParagraphElement> };
type PropsWithStandardRef<T extends AorB> = Props<T> & { ref?: Ref<HTMLParagraphElement> };
function CoreComponent<T extends AorB> ({ value, forwardedRef }:PropsWithForwardRef<T>): ReactElement {
return <p ref={forwardedRef}>{value}</p>;
}
const FinalComponent: (<T extends AorB>(props: PropsWithStandardRef<T>) => ReactElement | null) =
forwardRef<HTMLParagraphElement, Props<AorB>>(({ value }, ref) => <CoreComponent forwardedRef={ref} value={value} />);
/**
* The annotation for the function expression above can also be written this way,
* which allows for overloading with multiple signatures, one on each line inside the braces:
*/
// const FinalComponent: {
// <T extends AorB>(props: PropsWithStandardRef<T>): ReactElement | null;
// } = forwardRef<HTMLParagraphElement, Props<AorB>>(({ value }, ref) => <CoreComponent forwardedRef={ref} value={value} />);
/* Use: */
const ref = createRef<HTMLParagraphElement>();
const ExampleA = () => <FinalComponent<'a'> value="a" ref={ref} />;
const ExampleB = () => <FinalComponent<'b'> value="b" ref={ref} />;
const RefOptional = () => <FinalComponent<'a'> value="a" />;
const NoRestrictionA = () => <FinalComponent value="a" ref={ref} />;
const NoRestrictionB = () => <FinalComponent value="b" />;
const InvalidA = () => <FinalComponent<'a'> value="b" ref={ref} />;
const InvalidNotAorB = () => <FinalComponent value="c" />;
const InvalidNoValue = () => <FinalComponent<'a'> />;

Answer 2

Variable can't use generic. define it as FC:
const FinalComponent: <InvalidGenericType extends 'a' | 'b'>(
props: PropsWithStandardRef<InvalidGenericType>
) => JSX.Element = forwardRef<
HTMLParagraphElement,
PropsWithStandardRef<'a' | 'b'>
>(({ value }, ref) => {
return <CoreComponent forwardedRef={ref} value={value} />
}) as ComponentType<'a' | 'b'>
Or use interface to define it:
interface FinalComponentType
extends React.ForwardRefExoticComponent<PropsWithStandardRef<'a' | 'b'>> {
<GenericType extends 'a' | 'b'>(
props: PropsWithStandardRef<GenericType>
): JSX.Element
}
const FinalComponent = forwardRef<
HTMLParagraphElement,
PropsWithStandardRef<'a' | 'b'>
>(({ value }, ref) => {
return <CoreComponent forwardedRef={ref} value={value} />
}) as FinalComponentType
Works fine:
const ExampleUsage = () => <FinalComponent<'a'> value="b" /> // There will be error

Answer 3

I've encountered this problem a number of times and while this is not a canonical answer this is how I usually resolve it:
You basically need your react function component to accept a generic type as the type parameter. The only way I found to deal with this was to create the function component without explicitly declaring it as a function component. The problem is:
const FinalComponent : React.FC<Props<GenericType<...>> = // There's no type variable that you can use at that point
To bypass this what I do is:
const FinalComponent = <T extends 'a'|'b'>(props: Props<T>): ReturnType<React.FC<Props<T>>> => null; //Return whatever you need here
This will declare a generic react function component that you can use like below:
const Res = () => <FinalComponent<'a'> value='a' />; // Works
const Res2 = () => <FinalComponent<'a'> value='b' />; // Errors
Random link