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

Asked

Viewed 149 times

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;

1 answer

0

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
  • 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[]'.&#xA; Type '{ imageId: string; imageLabel: string; imageTag: string; imageUrl: string; imageText: string; }' is not assignable to type 'UnionType'.&#xA; Property 'videoThumb' is missing in type '{ imageId: string; imageLabel: string; imageTag: string; imageUrl: string; imageText: string; }' but required in type 'Video'.ts(2322)&#xA;index.tsx(34, 5): 'videoThumb' is declared here.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.