Универсальный interface для react компонента

Рейтинг: 0Ответов: 0Опубликовано: 07.02.2023

Всем привет. Не могу разобраться в одном моменте. Проект на 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
}```

Ответы

Ответов пока нет.