Универсальный interface для react компонента
Всем привет. Не могу разобраться в одном моменте. Проект на React+Typescript. Есть одна карточка продукта для разных типов продуктов (Карточка ещё не полностью зделана). Есть интерфейсы для каждого продукта свой. Как передавать нужный интерфейс в карточку продукта ? Отсюда данные передаю в карточку товара:
import { instanceAxios } from '../../axios/axios'
import { Card, CardList, SortRow } from '../../components'
import { ISet } from '../../Types/products.interfaces'
import styles from './Sets.module.scss'
export const Sets: FC = () => {
const [sets, setSets] = useState<ISet[]>([])
useEffect(() => {
instanceAxios<ISet[]>('/sets').then(({ data }) => setSets(data))
}, [])
return (
<>
<div>
<SortRow />
</div>
<CardList>
{sets.map((product, index) => (
<Card key={product.title + index} product={product} />
))}
</CardList>
</>
)
}```
Здесь я данные принимаю:
```import { FC } from 'react'
import styles from './Card.module.scss'
interface ICardProps {
product: any // Как универсально типизировать
}
export const Card:FC<ICardProps> = ({ product }) => {
return (
<div className={styles.card}>
<img
className={styles.card__image}
src={product.imageUrl}
alt={product.title}
/>
<h5 className={styles.card__title}>{product.title}</h5>
<p>{product.combo.join(',')}</p>
</div>
)
}```
Вот все типы которые будет принимать карточка товара:
```export interface IPizza {
id: number
imageUrl: string
title: string
types: number[]
sizes: number[]
size: number
price: number
priceMiddle: number
priceLarge: number
categories: string
rating: number
}
export interface ISet {
id: number
title: string
count: number
combo: string[]
price: number
categories: string
imageUrl: string
}
export interface IWok {
id: number
title: string
price: number
imageUrl: string
youtube: string
ingredients: string[]
categories: string
}
export interface IRoll {
id: number
title: string
price: number
imageUrl: string
ingredients: string[]
categories: string
}
export interface ISushi {
id: number
title: string
price: number
imageUrl: string
ingredients: string[]
categories: string
}
export interface IDrink {
id: number
imageUrl: string
title: string
price: number
categories: string
}
export interface ISalad {
id: number
title: string
price: number
imageUrl: string
ingredients: string[]
categories: string
}
export interface ISoup {
id: number
title: string
price: number
imageUrl: string
ingredients: string[]
categories: string
}
export interface ICorndog {
id: number
title: string
price: number
imageUrl: string
ingredients: string[]
categories: string
}
export interface IReview {
name: string
text: string
date: string
id: number
}```
Источник: Stack Overflow на русском