[英]TypeScript Err: "Element implicitly has an 'any' type because expression of type 'any' can't be used to index type
[Hello!][1] [你好!][1]
I'm getting this TypeScript error { "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; }; }'.", }.我收到这个 TypeScript 错误 {“元素隐式具有 'any' 类型,因为类型 'any' 的表达式不能用于索引类型'{ 0: { image: string; title: string; text: string; } ; 1: { 图像: 字符串; 标题: 字符串; 文本: 字符串; }; 2: { 图像: 字符串; 标题: 字符串; 文本: 字符串; }; }'.", }。 TS7053
TS7053
Unsure where my interfaces need to be added or if req at all?不确定我的接口需要添加到哪里或者是否需要添加?
this is highlighted setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])这是突出显示setCurrent(carouselData[event.target.getAttribute("data-Testimonials")])
what to change them to.将它们更改为什么。 I have no idea where I am going wrong, as I've only been coding for a month.
我不知道我哪里出错了,因为我只写了一个月的代码。
My Code for a carousel :我的轮播代码:
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
Why do you need a data-Testimonials
attribute?为什么需要
data-Testimonials
属性?
Just pass directly the index to handleSetClick
:只需将索引直接传递给
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>
)
The code编码
const carouselData = {
0: {
// ...
}
}
defines carouselData
data to use numerical indices, but you index it with event.target.getAttribute("data-Testimonials")
, which implicitly has any type.定义
carouselData
数据以使用数字索引,但您使用event.target.getAttribute("data-Testimonials")
对其进行索引,它隐式具有任何类型。 I would strongly type your event
parameter, so event.target.getAttribute("data-Testimonials")
has a string type.我会强烈键入您的
event
参数,因此event.target.getAttribute("data-Testimonials")
具有字符串类型。 I would then redefine carouselData
to use string indices like so:然后我会重新定义
carouselData
以使用字符串索引,如下所示:
const carouselData = {
'0': {
// ...
},
'1': {
// ...
}
}
It's generally best to avoid any
type whenever possible to avoid these kinds of situations.通常最好尽可能避免
any
类型,以避免这些情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.