Typescript接口要求存在两个属性之一

我正在尝试创造一个界面

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

是否有方法要求组件或单击进行设置是否有一种方法要求两个属性都不能设置?

当前回答

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

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

2018-01-12 19:52:46

其他回答

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

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

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

这样既干净又灵活。您可以任意地复杂化您的需求，断言诸如“需要所有属性，只需要这两个属性，或者只需要这一个属性”之类的东西，同时保持您的声明简单易读。

2018-12-29 17:05:05

还有另一个解决方案:

type RequiredKeys<T, K extends keyof T> = Required<Pick<T, K>> & Omit<T, K>;

type MenuItem2 = RequiredKeys<MenuItem, "component" | "click">;

2021-01-30 21:27:55

最后我这样做了:

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

但希望有一种方法可以用单一界面来建模。

2016-11-09 15:35:53

我用这个:

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

用法:

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

这使得fieldA和fieldB是必需的。

2020-08-31 03:52:17