为什么我在这里使用 TypeScript 得到“绑定元素‘商店’隐式具有‘任何’类型”？

Question

I have an array which contains 2 objects, I'd like to use map to pass each object to a Card. Here is the code:

The IStores interface:

 interface IStores { id: number; title: string; } export default IStores;

The Card component:

 const Card = ({ store }) => { return ( <> <div className="card" key={store.id}> <div className='card-body'> <h5 className="card-title"> {store.title} </h5> </div> </div> </> ) } export default Card;

The Home component which passes each object to Card with map :

 const storeDetails: IStores[] = [ { id: 1, title: 'Store A' }, { id: 2, title: 'Store B' } ] const Home = () => { return ( <> <div className='center-content'> <h1>Just shop local</h1> <div> { storeDetails.map( (d) => { return ( <Card store={d} /> ) } ) } </div> </div> </> ) } export default Home;

Now I've got an error in Card at line 1:

Binding element 'store' implicitly has an 'any' type

How can I fix it?

Answer 1

Binding element 'store' implicitly has an 'any' type

This error is telling you that you have a variable without a type. So you have to type the props that Card expects. In this case, you might do that like:

interface Props {
  store: IStores
}

const Card = ({ store }: Props) => {
  //...
}

Playground