Extract react component prop types with generics

Question

Is there a way to use react's ComponentProps type with generic-typed components?

For example:

function MyComponent({ text, number }: { text: T; number: N }) {
  return (
    
      {text} - {number}
    
  );
}

export type MyComponentProps = ComponentProps;

I expect MyComponentProps to be something like...

type MyComponentPropsExpected = {
    text: T;
    number: N;
}

With the generics preserved. However, the type just drops the generic and fills all generics with their extends type. In this case the actual MyComponentProps type is...

type MyComponentProps = {
    text: string;
    number: number;
}

See demo here

user_3050293 · Answer

Problem

MyComponent has two type parameters T and N with each constrained to string and number respectively:

function MyComponent(...) { ... }

However when the MyComponentProps type is created, no types are passed into those parameters:

export type MyComponentProps = ComponentProps;
//                                                   ^^^^^^^^^^^ 
//                                           No type arguments passed in

As a result, the resultant type is the type of the constrained component props.

Solution

TypeScript >=4.7

You'll need to pass in types to MyComponent:

type MyComponentProps = ComponentProps>;

TypeScript Playground

However, this syntax is only available in TypeScript 4.7+, when instantiation expressions were introduced.

TypeScript <4.7

Prior to TypeScript 4.7, I would have pulled out the props into its own interface and used that instead of building a type from ComponentProps:

interface MyComponentProps {
  text: T;
  number: N;
}

function MyComponent({
  text,
  number
}: MyComponentProps) {
  ...
}

export const test2: MyComponentProps<"text", 2> = {
  text: "text",
  number: 2
};