TypeScript: Extend props in React component conditionally

Question

Im trying to extend my component props conditionally depending on if a particular prop is passed.

My aim is to extend props by attributes of an anchor if a href prop is passed, and extend by attributes of a button if not.

Is this even possible?

Here's my attempt:

Please don't post images please. Use the code formatting features of SO instead. — Titian Cernicova-Dragomir
– Titian Cernicova-Dragomir, Commented Aug 9, 2019 at 19:07
you can cast the component itself <Button<Anchor> ...></Button> and then update the definition export const Button<T> = (p: Props<T>). The type definition would just extend then type Props<T> = {...} & T — John Ruddell
– John Ruddell, Commented Aug 9, 2019 at 19:11
Thanks John, good idea. I wonder if there is any way for this to work conditionally in the component itself without explicit casting — Samuel
– Samuel, Commented Aug 9, 2019 at 19:17
That would look something like this. codesandbox.io/s/react-typescript-3c07h — John Ruddell
– John Ruddell, Commented Aug 9, 2019 at 19:29

Alex · Accepted Answer · 2019-08-09 19:50:05Z

2

Can't you just define properties as union type and use typeguard? Something like this:

type ButtonProps = { onClick: () => {} }
type LinkProps = { href: string }

type BaseProps = {
    spinner?: boolean
}

type Props = BaseProps & (ButtonProps | LinkProps)

export const Button = (props: Props) => {
    if ('href' in props) {
        // Link
    } else {
        // Button
    }
}

answered Aug 9, 2019 at 19:50

Alex

1,85917 silver badges31 bronze badges

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

2 Comments

Samuel Over a year ago

Thanks for your suggestion @Aleksey but im seeing incompatible types now? How would i get around this: codesandbox.io/s/cocky-cohen-27cpw

John Ruddell Over a year ago

@Samuel you should be able to have the correct type inference

Collectives™ on Stack Overflow

TypeScript: Extend props in React component conditionally

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