Estou criando um componente com react e typescript e estou tendo este erro:
Property 'videoThumb' does not exist on type 'UnionType'. Property 'videoThumb' does not exist on type 'Image'.
basicamente o problema esta ocorrendo na linha 52 onde dentro do if eu verifico se "thumb" tem a propriedade "videoThumb". O tipo de dado que eu recebo pode ser ou igual uma interface Video ou uma Image.
Este erro também acontece com o thumb.imageUrl
Property 'imageUrl' does not exist on type 'UnionType'. Property 'imageUrl' does not exist on type 'Video'.
bom aqui está o componente:
import React from 'react';
import Slider from "react-slick";
import { useProduct } from 'vtex.product-context'
import './index.global.css';
const sliderSetting = {
centerMode: false,
arrows: true,
dots: false,
vertical: true,
verticalSwiping: true,
infinite: false,
slidesToShow: 3,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 1050,
settings: {
slidesToShow: 3,
}
}
]
};
interface Image {
imageUrl: string
imageId: string
imageLabel: string
imageTag: string
imageText: string
}
interface Video {
videoThumb: string
}
type UnionType = Video | Image
const Galeria: React.FC = () => {
const { product } = useProduct() || {}
const images: Array<UnionType> = product?.items[0].images!
function renderThumbnails(): JSX.Element[] | JSX.Element {
if (!images) return <></>;
return images.map((thumb, index): JSX.Element => {
if(thumb.videoThumb) {
return <li key={index}><img src={thumb.videoThumb} height="36px" width="36px"/></li>
}else {
return <li key={index}><img src={thumb.imageUrl} height="36px" width="36px"/></li>
}
})
}
return (
<div className="gallery">
<Slider {...sliderSetting}>
{renderThumbnails()}
</Slider>
</div>
);
}
export default Galeria;