Условия при создании интерфейса\type typescript?

Question

[Иван]

Как указать, что если нету icon, то обязательно должен быть text и наоборот?

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

Answer 1

[WbICHA]

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

Или по нормальному

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

Comments

[Иван]

в ESLint правильно на запрет стоит)
ESLint: ES2015 module syntax is preferred over custom TypeScript modules and namespaces

[WbICHA]

Иван, так отключи это правило.

[Дмитрий Беляев]

Иван, WbICHA, если в namespace только типы, то можно его писать с declare:

declare namespace Data {
  interface Base {
    id: string | number;
  }

  interface WithIcon extends Base {
    icon: any;
  }

  interface WithText extends Base {
    text: string;
  }
}

так и в финальном JS артефактов не будет и у eslint в данном правиле есть настройка игнорировать декларации.
И да, перед типами в namespace можно не писать export, и без него абсолютно все типы доступны извне

[WbICHA]

Дмитрий Беляев,

И да, перед типами в namespace можно не писать export, и без него абсолютно все типы доступны извне

Вот именно по этой причине я предпочитаю обычный неймспейс, дабы экспортировать только то, что хочу.)