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: 
Here's a simple way to implement either but not both

```
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"
}

```
This approach combines `never` and `Omit`. Benefits here are that it's easy to understand and also easy to update if you need to add more properties.

```js
interface Base {
  title: string;
  icon: string;
  component?: never;
  click?: never;
}

interface OnlyComponent {
  component: any;
}

interface OnlyClick {
  click: any;
}

export type MenuItem = (Omit<Base, 'component'> & OnlyComponent) | (Omit<Base, 'click'> & OnlyClick);

```

You can use `in` to narrow an instance of `MenuItem`:

```js
const item: MenuItem = {
  title: 'A good title';
  icon: 'fa-plus';
  component: SomeComponent;
};

//...

if('component' in item) {
  const Comp = item.component;
  //...
}

```