items.map: Parameter 'item' implicitly has an 'any' type

Question

I'm trying to learn Ionic React with Typescript by creating a simple app for myself.

At this point 'I'm trying to dynamically populate an IonSegment from an array, the relevant code looks like this:

const [items, setItems] = useLocalStorage([{ id: 0, value: 'Item 0' }, { id: 1, value: 'Item 1' }, { id: 1, value: 'Item 1' }], [{ id: 0, value: 'An Error Occurred' }]);

....

<IonSegment color="brand" onIonChange={ ....... } value={sensor} id="segSensor">
            {items.map(item => {
              return (
                <IonSegmentButton key={item.id}>
                  <IonLabel>{item.value}</IonLabel>
                </IonSegmentButton>
              )
            })}
</IonSegment>

This fails to compile with the output:

Parameter 'item' implicitly has an 'any' type.ts(7006)

So, I understand that item needs to have a type declared, but I've tried the following without success:

{items.map(item:any => {
              return (

{items.map(<any>item => {
              return (

How do I declare the type for item?

Thanks

Which `useLocalStorage` hook are you using? [This one](https://usehooks.com/useLocalStorage)? Does it provide TypeScript typings? — T.J. Crowder, Nov 12 '21 at 09:50
type Item = { id: number, value: string } , use it instead of any — Madhuri, Nov 12 '21 at 09:55

score 5 · Accepted Answer · answered Nov 12 '21 at 09:52

5

Well its simple, you have to enclose your input in parenthesis as

items.map((item: any) => {})

Another thing that you can do is go in your tsconfig.json file and set noImplicityAny to false. This will stop TypeScript from yelling at you if something has an implicit any type.

answered Nov 12 '21 at 09:52

aekant

199
1
5

I'd read about the noImplicitAny flag but figured I'd leave it as is inorder to force me to learn things like this. – Phill Healey Nov 12 '21 at 10:04

score 3 · Answer 2 · answered Nov 12 '21 at 09:57

3

items.map((item: any) => { ...

Probably the problem is in useLocalStorage type too, maybe you have to create a type/interface for your initial state

useLocalStorage<MyLocalStorageType>( ...

Like that you can use the full power of TS

answered Nov 12 '21 at 09:57

robb

114
4

Thanks for the response. I marked @raja as the correct answer since he posted first. – Phill Healey Nov 12 '21 at 10:06
No problem mate – robb Nov 12 '21 at 10:20

score 2 · Answer 3 · answered Nov 12 '21 at 09:55

2

You are missing the paranteses in the arrow function when declaring a type:

{items.map((item: any) => {
              return (

answered Nov 12 '21 at 09:55

moiri

41
5

Thanks for the response. I marked @raja as the correct answer since he posted first. – Phill Healey Nov 12 '21 at 10:06

items.map: Parameter 'item' implicitly has an 'any' type

3 Answers3