typescript 和解构数组

Question

我的 typescript 有这个问题，无法理解出了什么问题:

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 ....
}

目前，一切都还好。当 display 函数这样写时(dogs:any，cats:any)，一切都很好，但是如果我将 display 函数更改为:

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

我在解构行(const [dogs, cats] = data;)中收到错误“狗没有喵喵键，猫没有吠键”???

我做错了什么？

Answer 1

data 是一个 [Dog, Cat] 数组，因此解构 const [dogs, cats] = data; 将导致赋值data 的第一个元素为 dogs，第二个元素为 cats。即，提取的值dogs 的类型为[Dog, Cat]。提取的 cats 类型为 [Dog, Cat]。

const [狗，猫] = data[0];

将正确解构以给出正确的狗和猫值。如果您想将狗和猫的集合放入单独的数组中，则可以使用 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);