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

Question

说我有以下代码段:

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

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

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

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

Answer 2

将

alarms: [] as Alarm[]

为Typescript和您工作？

有关如何在Typescript中转换数组的问题，请参见以下问题：TypeScript转换数组