How to define function in TypeScript with a destrcutured array as parameter

Question

I'm new to TS, but am very experienced in the latest on JavaScript. I'd like to use features that I'm familiar with in ES6. One in particular is using array destructuring in a function's parameters. I've learned that you can use an interface in TS to do object destructuring like so:

interface FooParameters {
  bar: any
}

function foo ({ bar }: FooParameters) {
  console.log(bar)
}

foo({ bar: 'fizz' })
// logs "fizz"

But I can't seem to find documentation on converting the following JS to TS

function foo ([bar]) {
  console.log(bar)
}

foo(['fizz'])
// logs "fizz"

bnieland · Accepted Answer · 2018-01-19 17:43:15Z

2

function foo(...barArray: FooParameters[]) {}

answered Jan 19, 2018 at 17:43

bnieland

6,6464 gold badges44 silver badges69 bronze badges

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

6 Comments

tsiege Over a year ago

It's unclear to me how a spread operator here would give me access to the parameter bar. Wouldn't this allow several variables to put into an array? I want to take a variable out of one.

bnieland Over a year ago

In this case, ... is concidered to be a "rest" operator (blog.mariusschulz.com/2016/12/23/…).

tsiege Over a year ago

Thanks for the clarification. I got it to work but I had to do the following to get it to work. You might want to edit your answer to clarify function bar([bar]: FooParameters[]) { console.log(bar) }

bnieland Over a year ago

interesting; so you do not need FooParameters, correct? Otherwise you will need to use: let a = ['fizz'].map<FooParameters>((v) => ({ bar: v })); foo(...a);

tsiege Over a year ago

It seems like the correct answer is function foo([bar]: [string)) {}

|

tsiege · Accepted Answer · 2018-01-19 19:45:55Z

1

After playing around with advice from @bnieland I was able to surmise the right answer. I needed to define an inline tuple with the corresponding parameters and their types.

function foo ([bar]: [string]) {
  console.log(bar)
}

foo(['fizz']) // logs "fizz"

answered Jan 19, 2018 at 19:45

tsiege

5081 gold badge4 silver badges19 bronze badges

6 Comments

bnieland Over a year ago

I have never seen that construct for an array (i.e. function foo ([bar]: [string])). Is it any different than function foo ([bar]: [string])?

bnieland Over a year ago

fyi: I am sure you are aware, but TypeScript Playground is an excellent place to try out these pure language questions!

tsiege Over a year ago

Thanks for the tip! But could you clarify your first response? Those two declarations look the same to me

bnieland Over a year ago

Oops! You are correct! Here is what I meant! function foo ([bar]: [string]) vs. function foo ([bar]: string[])

tsiege Over a year ago

Sorry, I've been digging a bit deeper, and I realized that function foo ([bar]: string[]) does work for the above code. I also, realized this example I gave didn't address my problem because I was trying to destructure two parameters from the array and they were different types, which is why I needed the tuple

|

Collectives™ on Stack Overflow

How to define function in TypeScript with a destrcutured array as parameter

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related