Types for Array Destructuring

Question

I'm mapping through an array and using destructuring.

const newArr = arr.map(({name, age}) => `${name} ${age}`)

The above errors as: Binding element 'name' implicitly has an 'any' type

Error goes away by adding:

const newArr = arr.map(({name, age}: { name: string; age: number }) => `${name} ${age}`)

The question is: Could I go about this with a more terse syntax and/or apply the needed types via an interface?

UPDATE: As a combination from the comments below and the suggestions by @grumbler_chester and @TimWickstrom

This was the more terse way I found to shorten my syntax:

Solution:

// User.tsx
interface User {
  name: string 
  age: number
}

const newArr = arr.map(({name, age}: User) => `${name} ${age}`)

Relevant github issue: github.com/Microsoft/TypeScript/issues/7576 — samsonthehero
– samsonthehero, Commented Jan 16, 2019 at 17:00
@Jonca33 Does it have some type annotation like: type User { name: string; age: number; } const arr: User[] = ... — GreenTeaCake
– GreenTeaCake, Commented Jan 16, 2019 at 17:11
@grumbler_chester I didn't add any types to arr. Suggestions? — Jonca33
– Jonca33, Commented Jan 16, 2019 at 17:12

Tim Wickstrom · Accepted Answer · 2019-01-16 17:09:58Z

2

If you would like to maintain strict type checking you could define your models.

File Architecture example.

/src
  /models
    Person.js

Person.js

export default {
  name: string,
  age: number
}

In your file

Import Person from './models/Person.js' // Path to Person.js

const newArr = arr.map(({name, age}:Person) => `${name} ${age}`)

Alternatively, if you do not require strict type checking and would like to suppress the warning this should work:

In your tsconfig.json (https://www.typescriptlang.org/docs/handbook/tsconfig-json.html) you can add the following:

from

"noImplicitAny": false,

to

"noImplicitAny": true,

answered Jan 16, 2019 at 17:09

Tim Wickstrom

5,7114 gold badges27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

GreenTeaCake · Accepted Answer · 2019-01-16 17:25:55Z

1

You can add type annotation to your arr variable and TS will infer type of destructed fields.

Please see example in playground (note noImplicitAny is true in options, error for arr0 mapping and no error for arr1 mapping)

And please check Type Inference for theory behind example.

answered Jan 16, 2019 at 17:25

GreenTeaCake

85810 silver badges17 bronze badges

2 Comments

GreenTeaCake Over a year ago

@Jonca33 I cannot provide you exact answer without the code but in general usual reason for such error is a collision when TS loses/cannot infer type of arr somewhere "above".

Jonca33 Over a year ago

indeed, I appreciate your insight, that lead me to a solution, please see my updated question.

Collectives™ on Stack Overflow

Types for Array Destructuring

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related