Property 'videoThumb' does not exist on type 'Uniontype'. Property 'videoThumb' does not exist on type 'Image'

Question

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;

Answer 1

You have defined that your Uniontype image array can be either video or image, and not both at the same time, so you make this error.

change:

type UnionType = Video | Image

To:

type UnionType = Video & Image