TypeScript接口需要两个属性之一才能存在

Question

我正在尝试创建一个可以

export interface MenuItem {
  title: string;
  component?: any;
  click?: any;
  icon: string;
}

1. 是否有办法要求组件或单击进行设置

Answer 1

匿名用户

有一个更简单的解决方案。无需依赖任何或复杂的条件类型（参见答案）：

1. 有没有办法要求设置组件或单击？（包含OR）

type MenuItemOr = {
    title: string;
    icon: string;
} & ({ component: object } | { click: boolean }) 
// brackets are important here: "&" has precedence over "|"

let testOr: MenuItemOr;
testOr = { title: "t", icon: "i" } // error, none are set
testOr = { title: "t", icon: "i", component: {} } // ✔
testOr = { title: "t", icon: "i", click: true } // ✔
testOr = { title: "t", icon: "i", click: true, component: {} } // ✔

联合类型（|）对应于inclusive或。它与非条件属性相交。

使用运算符中的将值缩小到其中一个成分：

if ("click" in testOr) testOr.click // works 

type MenuItemXor = {
    title: string;
    icon: string;
} & (
        | { component: object; click?: never }
        | { component?: never; click: boolean }
    )

let testXor: MenuItemXor;
testXor = { title: "t", icon: "i" } // error, none are set
testXor = { title: "t", icon: "i", component: {} } // ✔
testXor = { title: "t", icon: "i", click: true } // ✔
testXor = { title: "t", icon: "i", click: true, component: {} } //error,both set

基本上可以设置组件或单击，不应同时添加另一个组件。TS可以从MenuItemXor中生成一个有区别的联合类型，它对应于XOR。

这个XOR条件对于MenuItemXor来说是不可能的。

游戏场

1从技术上讲，prop？：从来没有被解析为prop？：未定义的，尽管前者经常用于说明。

Answer 2

不使用单个接口，因为类型没有条件逻辑，也不能相互依赖，但您可以通过拆分接口：

export interface BaseMenuItem {
  title: string;
  icon: string;
}

export interface ComponentMenuItem extends BaseMenuItem {
  component: any;
}

export interface ClickMenuItem extends BaseMenuItem {
    click: any;
}

export type MenuItem = ComponentMenuItem | ClickMenuItem;

Answer 3

借助于TypeScript 2.8中添加的Exclude类型，提供了一种要求至少一组属性中的一个属性的通用方法：

type RequireAtLeastOne<T, Keys extends keyof T = keyof T> =
    Pick<T, Exclude<keyof T, Keys>> 
    & {
        [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>
    }[Keys]

要求提供一个且仅提供一个的部分但非绝对方式是：

type RequireOnlyOne<T, Keys extends keyof T = keyof T> =
    Pick<T, Exclude<keyof T, Keys>>
    & {
        [K in Keys]-?:
            Required<Pick<T, K>>
            & Partial<Record<Exclude<Keys, K>, undefined>>
    }[Keys]

下面是一个TypeScript游乐场链接，显示了两者的作用。

RequireOnlyOne的警告是，TypeScript在编译时并不总是知道运行时存在的每个属性。所以很明显，RequireOnlyOne无法阻止它不知道的额外属性。我提供了一个示例，说明了RequireOnlyOne如何错过游乐场链接末尾的内容。

使用以下示例快速概述其工作原理：

interface MenuItem {
  title: string;
  component?: number;
  click?: number;
  icon: string;
}

type ClickOrComponent = RequireAtLeastOne<MenuItem, 'click' | 'component'>

>

拾取

{[K in Keys]-？：必需

{ 
    component: Required<{ component?: number }> & { click?: number }, 
    click: Required<{ click?: number }> & { component?: number } 
}[Keys]

这就变成了

{
    component: { component: number, click?: number },
    click: { click: number, component?: number }
}['component' | 'click']

最终变成

{component: number, click?: number} | {click: number, component?: number}

上述步骤1和步骤2的交点

{ title: string, icon: string} 
& 
({component: number, click?: number} | {click: number, component?: number})

简化为

{ title: string, icon: string, component: number, click?: number} 
| { title: string, icon: string, click: number, component?: number}