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

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