React & Typescript component props type for `Component`

Question

I have the following HOC in React:

`restricted` prop
    const ConditionalSwitch = ({component: Component, showIfTrue, ...rest}) => (

    showIfTrue
        ? <Component {...rest}/>
        : null
);

How do I define the props so that Typescript will be happy with it?

{component: Component, showIfTrue, ...rest}

I tried

export interface CSProps {
    component: any,
    showIfTrue: boolean
}

How do I handle the ...rest here?

I'm not sure I follow, in typescript if you want to denote that your component doesn't need to have all the properties you can use Partials — Mike Tung
– Mike Tung, Commented Mar 5, 2019 at 14:21

Titian Cernicova-Dragomir · Accepted Answer · 2019-03-05 15:58:24Z

2

If you want to preserve type safety, you need to make ConditionalSwitch generic and have it infer the full props passed to the component based on the actual value of Component. This will ensure that the client of ConditionalSwitch will pass in all the required properties of the used component. To do this we use the approach described here:

const ConditionalSwitch = <C extends React.ComponentType<any>>({ Component,  showIfTrue, ...rest}: { Component: C, showIfTrue: boolean} & React.ComponentProps<C> ) => (
    showIfTrue
        ? <Component {...(rest as any) }/>
        : null
);

function TestComp({ title, text}: {title: string, text: string}) {
    return null!;
}

let e = <ConditionalSwitch Component={TestComp} showIfTrue={true} title="aa" text="aa" />  // title and text are checked

When passing the rest to the component we do need to use a type assertion because typescript is not able to figure out that { Component: C, showIfTrue: boolean} & React.ComponentProps<C> minus Component and showIfTrue is just React.ComponentProps<C> but you can't have it all :)

answered Mar 5, 2019 at 15:58

Titian Cernicova-Dragomir

253k37 gold badges464 silver badges394 bronze badges

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

5 Comments

mikeb Over a year ago

I get the left hand side of an arithmetic operation must be... on the ? <Component {...(rest as any)} line

Titian Cernicova-Dragomir Over a year ago

@mikeb works for me. What version of ts are you using ?

mikeb Over a year ago

Typescript is 3.3.3333

Titian Cernicova-Dragomir Over a year ago

@mikeb github.com/dragomirtitian/so-answers/tree/so-55004765 I tried on 3.3.1 and 3.4 (don't have 3.3.3333 right now)

mikeb Over a year ago

I restarted Intellij and now I get Cannot find name Component right after the ? - it's like it does not see that it is an argument.

Israel.z · Accepted Answer · 2019-03-05 14:24:31Z

0

Try this:

export interface CSProps {
    component: any;
    showIfTrue: boolean;
    [key: string]: any;
}

answered Mar 5, 2019 at 14:24

Israel.z

3412 silver badges6 bronze badges

Collectives™ on Stack Overflow

React & Typescript component props type for `Component`

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related