使用泛型提取反应组件道具类型

Question

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

For example:

function MyComponent<T extends string, N extends number>({ text, number }: { text: T; number: N }) {
  return (
    <div>
      {text} - {number}
    </div>
  );
}

export type MyComponentProps = ComponentProps<typeof MyComponent>;

I expect MyComponentProps to be something like...

type MyComponentPropsExpected<T extends string, N extends number> = {
    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 at https://codesandbox.io/s/react-component-type-generics-6tkr55

Answer 1

Problem

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

function MyComponent<T extends string, N extends number>(...) { ... }

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

export type MyComponentProps = ComponentProps<typeof MyComponent>;
//                                                   ^^^^^^^^^^^ 
//                                           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<typeof MyComponent<"text", 2>>;

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<T extends string, N extends number> {
  text: T;
  number: N;
}

function MyComponent<T extends string, N extends number>({
  text,
  number
}: MyComponentProps<T, N>) {
  ...
}

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

TypeScript Playground

Further reading

• Typescript ReturnType of generic function