Typescript 和 React 使用空类型数组设置初始状态答案

【问题标题】：Typescript and React setting initial state with empty typed arrayTypescript 和 React 使用空类型数组设置初始状态
【发布时间】：2018-12-20 15:46:20
【问题描述】：

假设我有以下 sn-p:

interface State {
  alarms: Alarm[];
}
export default class Alarms extends React.Component<{}, State> {
  state = {
    alarms: []
  };

因为我试图设置alarms: [] Typescript 不喜欢它，因为[] != Alarm[]。我发现我可以使用 alarms: new Array<Alarm>() 来初始化一个空类型数组，但是我不太喜欢这种语法 - 有没有更简单/更好的方法？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

会

alarms: [] as Alarm[]

为 Typescript 和你工作？

请参阅有关如何在 Typescript 中转换数组的问题：TypeScript casting arrays

【讨论】：

【解决方案2】：

问题在于，当您在类中创建字段时，编译器将相应地键入该字段（使用显式类型或从初始化表达式中推断出的类型，例如在您的情况下）。

如果要重新声明该字段，则应明确指定类型：

export default class Alarms extends React.Component<{}, State> {
    state: Readonly<State> = {
        alarms: []
    };
}

或者在构造函数中设置状态：

export default class Alarms extends React.Component<{}, State> {
    constructor(p: {}) {
        super(p);
        this.state = {
            alarms: []
        };
    }
}

您也可以将数组转换为预期的类型，但如果有很多字段，最好让编译器为您检查对象字面量。

【讨论】：

我们需要在构造函数中使用setState()吗？似乎可以在这里使用this.state = {...}。
@Cerberus 你不需要......但你可以而且它不会复制extends 子句和state 中的状态类型（如Readonly<State>）但任何一种解决方案都应该有效:)
引用文档：“您不应在constructor() 中调用 setState()。” reactjs.org/docs/react-component.html#constructor

【解决方案3】：

声明：

alarms: Array<Alarm>

初始化状态：

this.setState({
var1:'',
var2:''
});

我更喜欢上面的声明

【讨论】：