TypeScript conditional types: Extract component props type from react component

Question

Using TypeScript 2.8 new conditional generic type feature, is it possible to extract the TProps of a React.ComponentType<TProps> component? I want a type that can either work on the ComponentType or the TProps itself, so you can - as a developer - pass either of both:

For example:

interface TestProps {
    foo: string;
}

const TestComponent extends React.Component<TestProps, {}> {
    render() { return null; }
}

// now I need to create a type using conditional types so that
// I can pass either the component or the props and always get the 
// TProps type back
type ExtractProps<TComponentOrTProps> = /* ?? how to do it? */

type a = ExtractProps<TestComponent> // type a should be TestProps
type b = ExtractProps<TestProps>     // type b should also be TestProps

Is this possible, and can anybody provide a solution?

Possible duplicate of Typescript React: Access component property types — Mišo
– Mišo, Commented May 3, 2019 at 15:39

Sebastien Lorber · Accepted Answer · 2021-03-24 16:57:04Z

136

There's a built-in helper for that

type AnyCompProps = React.ComponentProps<typeof AnyComp>

And it also works for native DOM elements:

type DivProps = React.ComponentProps<"div">

https://stackoverflow.com/a/55005902/82609

edited Mar 24, 2021 at 16:57

answered Mar 18, 2019 at 11:19

Sebastien Lorber

92.6k76 gold badges302 silver badges430 bronze badges

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

2 Comments

Joseph King Over a year ago

Nice find Sebastien.

Honest Charley Bodkin Over a year ago

This is the way.

Dynalon · Accepted Answer · 2019-09-11 17:11:18Z

11

I'd suggest to use React.ComponentType, because it will also include functional components:

type ExtractProps<TComponentOrTProps> =
  TComponentOrTProps extends React.ComponentType<infer TProps>
    ? TProps
    : TComponentOrTProps;

edited Sep 11, 2019 at 17:11

Dynalon

6,86410 gold badges60 silver badges87 bronze badges

answered Mar 2, 2019 at 20:44

SleepWalker

1,32115 silver badges17 bronze badges

2 Comments

Dynalon Over a year ago

Marking your answer as the right one now, as I also support functional/hooks based component introduced in React 16.8.

Cristian E. Over a year ago

Why returning TComponentOrTProps if it doesn't extend from React.ComponentType ?

Titian Cernicova-Dragomir · Accepted Answer · 2018-04-29 08:49:31Z

5

It's a pretty straight forward application of conditional types and their inference behavior (using the infer keyword)

interface TestProps {
    foo: string;
}

class TestComponent extends React.Component<TestProps, {}> {
    render() { return null; }
}

type ExtractProps<TComponentOrTProps> = TComponentOrTProps extends React.Component<infer TProps, any> ? TProps : TComponentOrTProps;

type a = ExtractProps<TestComponent> // type a is TestProps
type b = ExtractProps<TestProps>     // type b is TestProps

answered Apr 29, 2018 at 8:49

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

3 Comments

Dynalon Over a year ago

This does not work anymore with React functional components introduced in React 16.8 (type React.FC<TProps>)

Cristian E. Over a year ago

Why returning TComponentOrTProps if it doesn't extend from React.ComponentType ?

SleepWalker Over a year ago

@CristianE. I think that this is needed to make ExtractProps<TestProps> work. If ExtractProps used with React.Component, it will extract props from it's declaration. Otherwise ExtractProps will assume that TComponentOrTProps is simply a Props interface and will return it as is

Collectives™ on Stack Overflow

TypeScript conditional types: Extract component props type from react component

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related