reactjs - 如何使 TypeScript 界面 Prop 依赖于同一界面中的另一个 Prop ？

Question

type ButtonVariant = 'action' | 'hero';

type Size = 'small' | 'medium' | 'large';

export interface ButtonProps {
    variant: ButtonVariant;
    size?: Size;
}

export default function Button(props: ButtonProps): ReactElement {
    const { variant } = props;

    if (variant === 'hero')) {
        return <HeroButton {...props} />;
    }

    if (variant === 'pill') {
        return <PillButton {...props} />;
    }
}

在上面的代码中，我有 React 按钮的两个变体:HeroButton 和 PillButton。

两个按钮都期望“ButtonProps”作为它们的 Prop 类型。但是，我想让 HeroButton 仅期望大小为“中”或“大”。 PillButton 应该接受“小”、“中”或“大”作为其尺寸属性。

问题:如何编写 ButtonProps 接口(interface)，使 Button 组件允许(并在 VS Code 中建议)'小'​​ | '中号' | 'large' 当 variant prop 为“pill”时作为 size prop，但只允许 'medium' | 'large' 当 variant prop 是“hero”时？

注意:我研究了 TypeScript Discriminated Unions 来解决这个问题，但还没有成功。

Answer 1

试试这个:

export interface HeroButtonProps {
    variant: 'hero';
    size?: 'medium' | 'large';
}

export interface PillButtonProps {
    variant: 'pill';
    size?: 'small' | 'medium' | 'large';
}

export type ButtonProps = HeroButtonProps | PillButtonProps;

然后将 HeroButton 更改为仅接受 HeroButtonProps 并且同样适用于 PillButton。