时间戳

首页 > 解决方案 > Typescript 和 React 使用空类型数组设置初始状态

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

问题描述

假设我有以下代码段：

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

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

标签： reactjstypescript

解决方案

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

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

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

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

推荐阅读