جاوااسکریپت - خطای تایپاسکریپت: «عنصر به طور ضمنی نوع 'any' دارد زیرا نمیتوان از عبارت با نوع 'any' برای اندیسگذاری نوع استفاده کرد»

[سلام!][1]

من این خطای TypeScript را دریافت میکنم { "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ 0: { image: string; title: string; text: string; }; 1: { image: string; title: string; text: string; }; 2: { image: string; title: string; text: string; }; }'.", }. TS7053

مطمئن نیستم که رابطهای من باید کجا اضافه شوند یا اصلاً نیاز است یا نه؟

این برجسته شده است setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])

آنها را به چه چیزی تغییر دهم. من هیچ ایدهای ندارم که کجا اشتباه میکنم، زیرا فقط یک ماه است که برنامهنویسی میکنم.

کد من برای یک چرخوفلک:

interface CarouselCardProperties {
   image: string;
   title: string;
   text: string;
}

export default function Testimonials() {
   const carouselData = {
       0: {
           image: tobi,
           title: "I no longer have to howl at the moon to call for my lady !!",
           text: "Tobi ~ Vancouver, Canada",

       },
       1: {
           image: girly,
           title: "With Enrico going on dates, we have more time to ourselves!",
           text: " Gina ~ Rome, Italy",

       },
       2: {
           image: loveshades,
           title: "I no longer have to worry about staying clean, I kitties licking me every night.  I have Love Shades on.",
           text: " Princess ~ Georgia, USA",
       },
   };

   const [current, setCurrent] = useState(carouselData[0])

   const [active, setActive] = useState(0)

   const handleSetClick = (event:any) => {

       setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
       setActive(event.target.getAttribute("data-Testimonials"))

   };
   return (
       <Container>
           <Img src={current.image} />
           <Title>{current.title}</Title>
           <Text>{current.text}</Text>
           <div>
               {Object.keys(carouselData).map(index => (
                   <Span
                       onClick={(event:any) => handleSetClick(event)}
                       data-Testimonials={index}
                       key={index} />
               ))}
           </div>
       </Container>
   )
}```


 [1]: https://i.sstatic.net/A9CwZ.png

پاسخ شماره ۱

چرا به یک ویژگی data-Testimonials نیاز دارید؟

فقط به طور مستقیم ایندکس را به handleSetClick منتقل کنید:

const handleSetClick = (index: keyof typeof carouselData) => {
    setCurrent(carouselData[index])
    setActive(index)
};

return (
   <Container>
       <Img src={current.image} />
       <Title>{current.title}</Title>
       <Text>{current.text}</Text>
       <div>
           {Object.keys(carouselData).map(index => (
               <Span
                   onClick={() => handleSetClick(index)}
                   key={index} />
           ))}
       </div>
   </Container>
)

پاسخ شماره ۲

کد

const carouselData = {
    0: {
        // ...
    }
}

تعریف میکند داده carouselData برای استفاده از شاخصهای عددی، اما شما آن را با event.target.getAttribute("data-Testimonials") شاخصبندی میکنید، که بهطور ضمنی هر نوعی دارد. من به شدت پارامتر event شما را نوعدهی میکنم، بنابراین event.target.getAttribute("data-Testimonials") نوع رشته خواهد داشت. سپس carouselData را بازتعریف میکنم تا از شاخصهای رشتهای به این صورت استفاده کند:

const carouselData = {
    '0': {
         // ...
     },
    '1': {
         // ...
     }
}

به طور کلی بهتر است هر زمان ممکن است از نوع any اجتناب کنید تا از این گونه موقعیتها جلوگیری شود.