打字稿接口需要两个属性中的一个存在

Question

我试图创造一种可以有

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

1. 的接口是否有需要component或click要设置
2. 的方法是有一个方式要求两个属性不能设置？

Answer 1

我落得这样做：

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

而不多个接口的替代方案是

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

我在How to create a Partial-like that requires a single property to be set