typescript接口需要存在两个属性之一

Question

我正在尝试创建一个可以拥有的界面

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

1. 有没有办法要求component或click设置
2. 有没有办法要求两个属性都不能设置？

Answer 1

借助ExcludeTypeScript 2.8中添加的类型,提供了一种需要至少一组属性的通用方法:

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 playground链接,显示两者都在运行.

需要注意的RequireOnlyOne是,TypeScript并不总是在编译时知道运行时将存在的每个属性.所以显然RequireOnlyOne无法做任何事情来防止它不知道的额外属性.我提供了一个例子,说明如何RequireOnlyOne在游乐场链接的末尾错过任何东西.

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

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

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

1. Pick<T, Exclude<keyof T, Keys>>from RequireAtLeastOne成为{ title: string, icon: string},未包含的键的未更改属性'click' | 'component'

2. { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys]来自RequireAtLeastOne成为

   { 
       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}
   

3. 上面的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}
   

Answer 2

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

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: {} } // ?

甲联合类型（|）对应于包容OR。它与非条件属性相交。

使用in运算符将值缩小回成分之一：

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

2. 有没有办法要求不能设置这两个属性？(独家OR/ XOR)

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

基本上任一 component 或 click可设定，其他的应该从不¹被同时加入。TS可以做出区分联合类型出来的MenuItemXor，它对应于XOR。

XOR对于MenuItemXor已接受的答案，此条件是不可能的。

操场

¹ _{从技术上讲，prop?: never解析为prop?: undefined，尽管前者经常用于说明。}

Answer 3

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

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 4

没有多个接口的替代方法是

export type MenuItem = {
  title: string;
  component: any;
  icon: string;
} | {
  title: string;
  click: any;
  icon: string;
};

const item: MenuItem[] = [
  { title: "", icon: "", component: {} },
  { title: "", icon: "", click: "" },
  // Shouldn't this error out because it's passing a property that is not defined
  { title: "", icon: "", click: "", component: {} },
  // Does error out :)
  { title: "", icon: "" }
];

我在如何创建需要设置单个属性的Partial-like中问过类似的问题

上面的内容可以简化，但可能会或可能不容易阅读

export type MenuItem = {
  title: string;
  icon: string;
} & (
 {component: any} | {click: string}
)

请注意，这些都不阻止您同时添加两者，因为TypeScript确实允许使用AND / OR的对象具有额外的属性，请参见https://github.com/Microsoft/TypeScript/issues/15447

Answer 5

我最终做了：

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

export interface MenuItemComponent extends MenuItem{
  component: any;
}

export interface MenuItemClick extends MenuItem{
  click: any;
}

然后我用：

 appMenuItems: Array<MenuItemComponent|MenuItemClick>;

但是希望有一种方法可以使用单个界面对其进行建模。

Answer 6

我喜欢Pick与包含所有属性的基本类型一起使用来建立这些类型的条件要求。

interface MenuItemProps {
  title: string;
  component: any;
  click: any;
  icon: string;
}

export type MenuItem =
  Pick<MenuItemProps, "title" | "icon" | "component"> |
  Pick<MenuItemProps, "title" | "icon" | "click">

这既干净又灵活。您可以使您的需求变得任意复杂，断言诸如“需要所有属性，仅需要这两个属性，或仅需要这一个属性”等内容，同时保持声明简单且可读。

Answer 7

这是实现其中一个但不能同时实现两者的简单方法

type MenuItem =  {
  title: string;
  component: any;
  click?: never;
  icon: string;
} | {
  title: string;
  component?: never;
  click: any;
  icon: string;
}

// good
const menuItemWithComponent: MenuItem = {
  title: 'title',
  component: "my component",
  icon: "icon"
}

// good
const menuItemWithClick: MenuItem = {
  title: 'title',
  click: "my click",
  icon: "icon"
}

// compile error
const menuItemWithBoth: MenuItem = {
  title: 'title',
  click: "my click",
  component: "my click",
  icon: "icon"
}

Answer 8

我用这个：

type RequireField<T, K extends keyof T> = T & Required<Pick<T, K>>

用法：

let a : RequireField<TypeA, "fieldA" | "fieldB">;

这使得fieldA与fieldB 要求。