打字稿/反应 - 从this.state解构引发错误

Question

我的一个React组件中有以下方法：

getRandomColor(){
  const { colors }: { colors: any } = this.state;
  return colors[Math.floor(Math.random() * colors.length)];
}

然而，打字稿在解构声明中给我一个错误，我不明白为什么：

  

输入'Readonly＆lt; {}＆gt;'不能指定为'{colors：any; }”。     “Readonly＆lt; {}＆gt;”类型中缺少属性“颜色”。

有人可以告诉我为什么吗？我肯定在构造函数中设置this.state.colors，即使我没有，我也不完全确定为什么它会让我犯这个错误。

Answer 1

在TypeScript中，类属性需要类型定义：

https://www.typescriptlang.org/docs/handbook/classes.html

作为我的组件类的属性的

this.state也需要该类型定义：

interface State{
  colors: string[];
};

class ColorPicker extends React.Component {
  state: State;
  //...
}

我添加后，错误就消失了。

Answer 2

正确的解构语法如下：

const { colors } = this.state;

这假设有一个this.state.colors