TypeScript Err：“元素隐式具有‘any’类型，因为‘any’类型的表达式不能用于索引类型

Posted 2023-02-22

【中文标题】TypeScript Err：“元素隐式具有‘any’类型，因为‘any’类型的表达式不能用于索引类型

【英文标题】：TypeScript Err: "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type

【发布时间】：2022-01-17 08:02:12

【问题描述】：

[你好！][1]

我收到了这个 TypeScript 错误 "元素隐含地具有 'any' 类型，因为 'any' 类型的表达式不能用于索引类型 ' 0: image: string; title: string; text: string; ; 1: image: string ; 标题: 字符串; 文本: 字符串; ; 2: 图像: 字符串; 标题: 字符串; 文本: 字符串; ; '.", 。 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.stack.imgur.com/A9CwZ.png

【参考方案1】：

为什么需要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>
)

【讨论】：

是的，这更容易不是吗！感谢您的反馈。

不客气?

【参考方案2】：

代码

const carouselData = 
    0: 
        // ...
    

将carouselData 数据定义为使用数字索引，但您使用event.target.getAttribute("data-Testimonials") 对其进行索引，它隐含地具有任何类型。 我会强烈键入您的 event 参数，因此 event.target.getAttribute("data-Testimonials") 具有字符串类型。然后我会重新定义 carouselData 以使用如下字符串索引：

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

通常最好尽可能避免any 类型以避免此类情况。