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:

Answer 1

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
    }
}