typescript - 在编译时强制指定两个道具之一？

Question

我有一个样式化的Button组件。

interface Button {
    href?: string;
    action(): void;
}

我希望此 Button 的使用者通过（XOR）href或action作为道具，而不是两者。

我希望 TypeScript 在编译时强制执行此操作。

我怎样才能做到这一点？

标签： typescript

Answer 1

您可以使用联合类型来指定该类型可以具有一个道具或另一个

type Button = {
    href: string;
    action?: never
} | {
    action: () => void;
    href?: never;
}

let b1: Button = { href: "" };
let b2: Button = { action: () => { } };
let b3: Button = { action: () => { }, href: "" }; // error

您需要添加可选never道具以确保您收到错误，这是由于过多的属性检查的工作方式，您可以在此处阅读更多信息。您也可以使用该StrictUnion答案中的类型，但仅对于两个属性，它可能是矫枉过正。