TypeScript：有条件地扩展React组件中的props

Question

我尝试根据是否通过特定道具有条件地扩展组件道具。

我的目标是，如果传递了anchor道具，则用href的属性来扩展道具，如果没有通过button的属性来扩展。

这有可能吗？

这是我的尝试：

Answer 1

您是否只能将属性定义为联合类型并使用typeguard？ 像这样：

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