Question: I'm trying to create an interface that could have 

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

```

1. Is there a way to require `component` or `click` to be set
2. Is there a way to require that both properties can't be set?

Answer: 
An alternative without multiple interfaces is

```
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: "" }
];

```

I've asked a similar question at [How to create a Partial-like that requires a single property to be set](https://stackoverflow.com/questions/48230773/how-to-create-a-partial-like-that-requires-a-single-property-to-be-set)

The above could be simplified, but it may or may not be easier to read

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

```

Note that none of these prevent you from adding both because TypeScript does allow extra properties on objects that use AND/OR See <https://github.com/Microsoft/TypeScript/issues/15447>
I ended up doing:

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

export interface MenuItemComponent extends MenuItem{
  component: any;
}

export interface MenuItemClick extends MenuItem{
  click: any;
}

```

Then I used:

```
 appMenuItems: Array<MenuItemComponent|MenuItemClick>;

```

But was hoping there was a way to model it with a single interface.