Reactjs 如何使TypeScript接口道具依赖于同一接口中的另一道具？ type ButtonVariant='action'|'hero'； 类型大小=‘小’|‘中’|‘大’； 导出接口按钮按钮{ 变体：按钮变体； 大小？：大小； } 导出默认功能按钮（道具：ButtonProps）：ReactElement{ const{variant}=props； 如果（变量=='hero'））{ 返回； } 如果（变量=='pill'）{ 返回； } }

在上面的代码中，我有两个React按钮的变体：

HeroButton

和

PillButton

两个按钮都希望“按钮按钮”作为其道具类型。然而，我想让Herobtton的尺寸仅为“中”或“大”。PillButton应接受“小”、“中”或“大”作为其尺寸支柱

问题：如何编写

按钮操作

界面，使

按钮

组件允许（并在VS代码中建议）

将“小”、“中”、“大”作为变型道具的尺寸道具

，但仅允许变型道具为“英雄”时使用

中“大”

注意：为了解决这个问题，我已经研究了TypeScript区分工会，但还没有成功地使其工作。

试试这个：

导出接口HeroButtonProps{
变体：“英雄”；
尺寸？：“中等”|“大”；
}
导出接口PillButtonProps{
变体：“药丸”；
大小？：“小”|“中”|“大”；
}
导出类型ButtonProps=HeroButtonProps | PillButtonProps；

---

然后将

HeroButton

更改为仅接受

herobutonprops

，同样地，对于

PillButton

，类似的操作也应该有效

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

请注意，我们不分解变量，这样做会丢失控制流分析

---

编辑-这是一个游乐场链接

这消除了我的编译器错误。但是，我现在在使用时，在VS代码中没有收到任何警告。“variant”道具提供允许的值作为建议（“hero”|“pill”），但在使用“size”道具时，我没有得到任何建议或更正。这是在TS中使用歧视联合的正常副作用吗？不，这听起来不典型，我在您的用例中添加了一个链接，如果这在您的vs代码中不起作用，那么可能是typescript版本或react问题？

type DiscUnion =
| { variant: "hero"; size?: "medium" | "large" }
| { variant: "pill"; size?: "small" | "medium" | "large" };

export default function Button(props: DiscUnion): any {
    if (props.variant === "hero") {
        const w = props.size; //typeof w is "medium" | "large"
    }

    if (props.variant === "pill") {
        const w = props.size; //typeof w is "small" | "medium" | "large"
    }
}

// allowed
Button({ variant: "hero", size: "medium" });

// not allowed
Button({ variant: "hero", size: "small" });