reactjs - 使用 Typescript 和 React 設定具有空型別陣列的初始狀態

假設我有以下程式片段：

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

由於我正在嘗試設置 alarms: []，Typescript 不喜歡這樣，因為 [] != Alarm[]。我發現我可以使用 alarms: new Array<Alarm>() 來初始化一個空的類型化陣列，但我其實不太喜歡這個語法——有沒有更簡單/更好的方法？

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

你也可以將陣列轉換為預期的類型，但如果有很多欄位，最好讓編譯器替你檢查物件字面值。

答案＃2

會

alarms: [] as Alarm[]

適用於 Typescript 和你嗎？

查看這個關於如何在 Typescript 中轉換陣列的問題：TypeScript 轉換陣列