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

小编典典

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

reactjs

说我有以下片段：

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

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

阅读 386

2020-07-22

共1个答案

小编典典

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

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

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: []
        };
    }
}

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

2020-07-22