Где размещать тесно связанные типы typescript?

Question

[eugenedrvnk]

Есть к примеру структура такая структура компонентов:

/Grid
  Grid.tsx
  GridItem.tsx

В GridItem есть тип:

type GridItemProps = {
  title: string;
  description: string;
}

Grid.tsx имеет следующий тип:

type GridProps = {
  title: string;
  items: Array<GridItemProps>;
}

Насколько корректный вариант в Grid импортить тип из GridItem и использовать его. В какую сторону должна здесь быть направлена зависимость? Или объявлять тип в Grid, и потом уже подгонять компонент GridItem под его требования.

Comments

[WbICHA]

А по какой причине ты вообще хочешь передавать готовые компоненты GridItem, а не данные?

Answer 1

[Aetae]

Не слушай Василий Банников, плодить копипаст-типы точно не надо.

А по размещению типов точно такая же логика как с обычными модулями. Так что абсолютно нормально импортировать связанные типы из связанного модуля. Все теории и паттерны проектирования применяются и тут.

По хорошему конечно стоит придерживаться SOLID или чего-то подобного.
Т.е. в Grid сделать тип IGridItemProps с теми свойствами которые точно нужны для работы Grid, а в GridItem наследовать от него уже конкретную реализацию

interface GridItemProps extends IGridItemProps { ... }

. Однако это нужно только если теоретически могут появиться ещё GridItemSuper и GrigItemNice, если же такого быть не может и модули(компоненты) сами по себе тесно связны, то заморачиваться не стоит.

Comments

[Василий Банников]

А почему нет? Пропсы грида и пропсы его элемента - это разные вещи.
Не уверен, как эта фича называется (прошу сказать), но можно ещё как-то так сделать:

<Grid title={gridTitle}>
  <Grid.Item title={fristItemTitle} description={firstItemDescription} />
</Grid>

Типа вложенный такой компонент.

[Aetae]

Василий Банников, абсолютно не факт. Пропсы грида могут быть тесно связаны с пропсами элемента этого грида.

Что-то типа:

const GridItem: FC<IGridItemProps> = bool ? GridItemSuper : GrigItemNice;

<Grid title={gridTitle}>
  {items.map((props) => <GridItem {...props}/>)}
</Grid>

[Василий Банников]

Aetae, в общем нужно смотреть более конкретно, чтобы выбрать какой-то вариант.

Answer 2

[Василий Банников]

По хорошему, тут следует использовать новый тип, а не существующий GridItemProps.
Объяви ещё 1 GridItem у которого будет нужный набор свойств