假设我有这个

interface ButtonProps {
    children?: React.ReactNode,
    backgroundColor?: Colors,
    style?: object,
    disabled?: boolean,
    classes?: string
    onClick?: () => void
}

const Button = ({
                        backgroundColor,
                        classes,
                        children,
                        disabled = false,
                        onClick,
                        style,
                    }: ButtonProps) => {

    const _constructInlineStyles = (): CSSProperties => {
        ...
    }

    return (
        <button
            className={clsx(classes, 'button-container')}
            disabled={disabled}
            onClick={onClick}
            style={...}>
                {children}
        </button>
    )
}

export default Button;

然后，我想创建一个TextButton，它使用Button之上的构建。

interface TextButtonProps {
        children: string;
    }
    
    const TextButton = ({
                            children,
                        }: TextButtonProps) => {
        return (
            <Button>
                <Text>
                    {children}
                </Text>
            </Button>
        )
    }

export default TextButton;

我们可以这样写吗，ButtonProps对TextButton可用，而不命名它们。

interface TextButtonProps {
        children: string;
    }
    
    const TextButton = ({
                            children,
                            backgroundColor,
                            classes,
                            disabled = false,
                            onClick,
                            style,
                        }: TextButtonProps & ButtonProps ) => {
        return (
            <Button
                 className={classes}
                 disabled={disabled}
                 onClick={onClick}
                 style={style}>
                <Text>
                    {children}
                </Text>
            </Button>
        )
    }

就像

interface TextButtonProps {
        children: string;
        props: ButtonProps;
    }
    
    const TextButton = ({
                            children,
                            props,
                        }: TextButtonProps) => {
        return (
            <Button
                 {...props}>
                <Text>
                    {children}
                </Text>
            </Button>
        )
    }

这样我就可以

<TextButton 
    disabled={true} >
    Fooo
</TextButton>

？