How to get type of one specific prop of a react component?

Question

Imagine you import a React.Component (let's call it Foo) from any library (e.g. from node_modules). Now you want to extract the type of a prop (let's call it complexProp) from Foo, so you can use it elsewhere.

Example

Foo.tsx:

interface FooProps <P /*some generic stuff here*/> {
    complexProp: /*some super weird type you can not simply copy*/;
}

export class Foo extends React.Component<FooProps> {
    //...
    public render(){
        //...
        lookAtComplexProp(this.props.complexProp)
        //...
    }
}

function lookAtComplexProp(complexProp: /* I need the type of Foo.props.complexProp here*/) {
    //...
}

Is this somehow possible?
Exspecially, is this possible without knowing anything about the code behind Foo? In other words, is a syntax like type complexPropType = Foo.complexProp.getType(); possible?

Titian Cernicova-Dragomir · Accepted Answer · 2018-08-07 09:55:54Z

1

You can use a type query to get the type of any property of the interface. A simple type query has the form Type['PropName']. Instead of 'PropName' you can also use any string literal type or a union of them all representing keys of the target type. In your case it could look something like this:

function lookAtComplexProp<P /*copy constraint here*/>(complexProp: FooProps<P>['complexProp']){
    //...
}

Or if you already know for what P you want the complexProp:

function lookAtComplexProp(complexProp: FooProps<number /* or other type */ >['complexProp']){
    //...
}

Or if your interface has a default generic parameter you can omit the type parameter:

interface FooProps <P = number> {
    complexProp: { complexStuff: P};
}

function lookAtComplexProp(complexProp: FooProps['complexProp']){
    //...
}

You can also define a type alias for it just as you would for any type. But again depending on what you want to do there are options:

type myComplexType<P /*copy constraint here*/> = FooProps<P>['complexProp'] // you want the type alias to be generic so can get the type for any P.
type myComplexType = FooProps<number>['complexProp'] // you want complexProp type for a specific type argument
type myComplexType = FooProps['complexProp'] // FooProps has a default type argument

edited Aug 7, 2018 at 9:55

answered Aug 7, 2018 at 9:14

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

2 Comments

ysfaran Over a year ago

Is there a way to save the type, so you don't have to write it like this always? type myComplexType = /* set type once */; and then only reference myComplexType everywhere you need it.

Titian Cernicova-Dragomir Over a year ago

@Truntle sure, you can define a type alias for any type, edited the anser with the new info

Collectives™ on Stack Overflow

How to get type of one specific prop of a react component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related