Typescript and destructuring array

Question

I have this problem with typescript and can not understand what is wrong:

type Dogs = {bark: true};
type Cats = {meow: true};

........
.then((data: [Dogs, Cats][]) => {
  const [dogs, cats] = data;
  display(dogs, cats));
})
........

const display = (dogs: any, cats: any) => {
  return ....
}

For now, everything is ok. When display function is written like this (dogs: any, cats: any) everything is fine, but if I change display function to:

const display = (dogs: Dogs, cats: Cats) => {
  return ....
}

I receive an error in destructuring line (const [dogs, cats] = data;) that "dogs doesn't have meow key and cats doesn't have bark key"???

What I'm doing wrong?

data: [Dogs, Cats][] is an array of tuples, each tuple is [Dogs, Cats]. If you destructure as const [dogs, cats] = data; then dogs will hold the first tuple and cats will hold the second tuple. I'm not sure what you need but it's likely not an array of tuples. Either a plain tuple or an array. — VLAZ
– VLAZ, Commented Sep 1, 2020 at 6:47
Inside your then you are trying to deconstruct array of arrays into two variables. Each variable interpreted like array. So you should try just data: [Dogs, Cats]. — Dmitry
– Dmitry, Commented Sep 1, 2020 at 6:47

MjZac · Accepted Answer · 2020-09-01 07:02:31Z

2

data is an array of [Dog, Cat], so destructuring const [dogs, cats] = data; would lead to assign the first element of data to dogs and second element to cats. ie, extracted value dogs is of type [Dog, Cat]. And extracted cats is of type [Dog, Cat].

const [dog, cat] = data[0];

would correctly destructure to give correct dog and cat value. If you are tying to get the collection of dogs and cats into separate arrays, you can use reduce.

type Dogs = {bark: true};
type Cats = {meow: true};

const data: [Dogs, Cats][] = [[{bark: true}, {meow: true}]]

const display = (dogs: Dogs, cats: Cats) => {
  return 'dummy'
}

let result: {dogs: Dogs[], cats: Cats[]} = {dogs: [], cats: []};

data.reduce((acc, curr) => {
  const [dog, cat] = curr;
  
  acc.dogs.push(dog);
  acc.cats.push(cat);
  return acc
}, result);

answered Sep 1, 2020 at 7:02

MjZac

3,5541 gold badge20 silver badges30 bronze badges

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

Comments

Sefe · Accepted Answer · 2020-09-01 06:48:50Z

1

Your data parameter of then is an array of a tuple [Dogs, Cats]. If this is intended, you need to pick an item before deconstruction:

const [dogs, cats] = data[0];

If this is not intended, just annotate the type as a tuple:

.then((data: [Dogs, Cats])

answered Sep 1, 2020 at 6:48

Sefe

14.1k6 gold badges45 silver badges56 bronze badges

Collectives™ on Stack Overflow

Typescript and destructuring array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related