0
I am creating a component with React and typescript and am having this error:
Property 'videoThumb' does not exist on type 'Uniontype'. Property 'videoThumb' does not exist on type 'Image'.
basically the problem is occurring on line 52 where inside the if I check if "Thumb" has the property "videoThumb". The type of data I receive can be either a Video or an Image interface.
This error also happens with Thumb.imageurl
Property 'imageurl' does not exist on type 'Uniontype'. Property 'imageurl' does not exist on type 'Video'.
good here is the component:
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;
I tested this, but it gives a new error in the line where I declare the images
Type '{ imageId: string; imageLabel: string; imageTag: string; imageUrl: string; imageText: string; }[]' is not assignable to type 'UnionType[]'.
 Type '{ imageId: string; imageLabel: string; imageTag: string; imageUrl: string; imageText: string; }' is not assignable to type 'UnionType'.
 Property 'videoThumb' is missing in type '{ imageId: string; imageLabel: string; imageTag: string; imageUrl: string; imageText: string; }' but required in type 'Video'.ts(2322)
index.tsx(34, 5): 'videoThumb' is declared here.
– Mateus Guedes