How to get type of component props, when component defined with type parameters

Question

Although React.ComponentProps<MyComponent> is quite handy, I'm unable to figure out how to use it to construct a type of MyComponent's props, when MyComponent contains type parameters, eg (shortened type taken from a module)

declare type TMyComponent = <T = unknown>(props: {foo: string, bar: T}) => ReactElement

Somehow, using TMyComponent, I'd like to construct the type, eg, {foo: string, bar: number}

Although the following doesn't accomplish what I'm trying to do, I hope it demonstrates what I'm trying to do,

type MyDesiredType = React.ComponentProps<TMyComponent<number>>

How can I construct a type from a component's props that accepts type parameters?

Dennis Vash · Accepted Answer · 2021-10-08 10:44:17Z

1

The generic syntax should be near the type, same goes for default type, in your case the "unknown" is a default variable in JS syntax.

type TMyComponent<T = unknown> =(props: {foo: string, bar: T}) => React.ReactElement

type MyDesiredType = React.ComponentProps<TMyComponent<number>>
// Resolves to
type MyDesiredType = {
    foo: string;
    bar: number;
}

type MyDesiredTypeUnknown = React.ComponentProps<TMyComponent>
// Resolves to
type MyDesiredTypeUnknown = {
    foo: string;
    bar: unknown;
}

TS Playground

edited Oct 8, 2021 at 10:44

answered Oct 8, 2021 at 10:38

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to get type of component props, when component defined with type parameters

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related