Conditions when creating interface\type typescript?

Question

typescript

How to specify that if there is no icon, then there must be text and vice versa?

type IProps = {
data: { icon?: React.ReactSVGElement; text?:string; id:string | number}[];
handleClick: (id: string | number) => void;
};

Answer 1

type IProps = {
  data: (({ icon: any; } | { text: string; }) & { id: string | number })[];
};

Or in the normal

type IProps = {
  data: Data[];
}; 

type Data = Data.WithIcon | Data.WithText;
namespace Data {
  interface Base {
    id: string | number;
  }

  export interface WithIcon extends Base {
    icon: any;
  }

  export interface WithText extends Base {
    text: string;
  }
}