Как сделать множество вариаций данных массива для компонента ( tsx )?

Question

[JavaSscriptNoob]

Всем привет , такая ситуация : У меня есть компонент DefaultItemsLayout , я хочу что бы он принимал пропс , этот пропс должнен быть массивом состоящим из обьектов , дело в том что у меня есть три вида разных обьектов , тобеж я могу передать в пропс один из трёх массивов в которых будут обьекты разных типов что то типо такого

<DefaultItemsLayout items={arrayWithObjects1} /> или <DefaultItemsLayout items={arrayWithObjects2} /> или <DefaultItemsLayout items={arrayWithObjects3} />

, как мне сделать так что бы тс понимал какой сейчас исп. обьект что бы я имел возможность достучаться к полям обьекта ( что бы тс понимал какой сейчас передаётся обьект и понимал какие у него есть поля ) ?
Код компонента :

import DefaultCardLayot from "../DefaultCardLayout/DefaultCardLayout";
import { IReminds } from "../../../models/IReminds";
interface IDefaultItemsLayout { // тут можно добавить <T> как я полагаю
  items: Array<any>; 
}
export default function DefaultItemsLayout(props: IDefaultItemsLayout) {
  const { items } = props; // items - массив из обьектов ( обьекты могут быть разными ) 
  return (
    <Box>
      {items.map((item) => {
        return (
          <>
            <div>{item.title}</div> // item должен понимать какие у него есть поля 
            <DefaultCardLayot />
          </>
        );
      })}
    </Box>
  );
}

Спасибо !

Comments

[WbICHA]

items: (SomeType1 | SomeType2 | SomeType3)[]; ?

[JavaSscriptNoob]

WbICHA, а если таких вариаций будет штук 20-30 ? нужно будет постоянно| делать ? думал есть решение пооптимальней..

[WbICHA]

JavaSscriptNoob, зависит от конкретного случая. В твоём случае если из айтемов надо доставать только тайтл, то можешь так прописать:
items: ({ title: string })[];

Answer 1

[Александр]

interface IDefaultItemsLayout<T> {
  items: T[];
}

export default function DefaultItemsLayout<T>(
    props: React.PropsWithChildren<IDefaultItemsLayout<T>>
) { ... }

Comments

[JavaSscriptNoob]

то что надо , спасибо !

[WbICHA]

JavaSscriptNoob, возвращайся, когда получишь:
Property 'title' does not exist on type 'T'.

По факту это решение на уровне items: any[]. Тут нет проверки типов. Вообще.