如何使用React的setState（）修復掉毛錯誤

Question

我正在嘗試找出在處理我的React TypeScript項目時遇到的錯誤。 設置狀態時問題出在組件內：

this.setState({dialogStatus: DialogNoConfigurationFileStatus.Create});

我掉毛時得到的錯誤：

Property 'creationStep' is missing in type '{ dialogStatus: DialogNoConfigurationFileStatus.Create; }'.
Error at src/dialogs/dialog-no-configuration-file.tsx:137:23: Argument of type '{ creationStep: number; }' is not assignable to parameter of type 'DialogNoConfigurationFileState'.

組件的結構：

export interface DialogNoConfigurationFileState {
    dialogStatus: DialogNoConfigurationFileStatus;
    creationStep: number;
}

export class DialogNoConfigurationFile extends React.Component<DialogNoConfigurationFileProps, DialogNoConfigurationFileState> {
    public constructor(props: any) {
        super(props);
        this.state = {
            dialogStatus: DialogNoConfigurationFileStatus.Enter,
            creationStep: 0
        };
    }

    ...

}

我的假設是我得到了棉絨錯誤，因為接口DialogNoConfigurationFileState中的兩個參數都是必需的。 將它們都設置為可選時，錯誤消失了：

export interface DialogNoConfigurationFileState {
    dialogStatus?: DialogNoConfigurationFileStatus;
    creationStep?: number;
}

不過，我想讓他們保留。 這樣做的原因是因為我想在構造函數中強制創建狀態。 這樣，我this.state.creationStep從組件內部訪問this.state.creationStep時已設置狀態。 如果將狀態參數設置為可選，則必須首先檢查狀態和狀態參數是否已分配。 我想避免的一步。

在這里要做的最好的事情是什么？ 我是否在不知不覺中在此處創建了錯誤的代碼？ 即使linting失敗，代碼仍然可以正常運行，但是TSLint背后的人們一定對這個錯誤有一個想法。

有人可以詳細說明嗎？

編輯1：

枚舉DialogNoConfigurationFileStatus：

export enum DialogNoConfigurationFileStatus {
    Enter,
    Create,
}

Answer 1

如果您正在使用React的最新TypeScript定義 （在撰寫本文時為16.8.5），那么這不再是問題-較舊的定義不允許狀態的“部分”更新，但此問題在某些時候已得到解決。 。

如果無法更新，並且您確實要強制保留字段，則可以使用強制轉換作為解決方法，以消除類型錯誤

this.setState({
  dialogStatus: DialogNoConfigurationFileStatus.Create
} as DialogNoConfigurationFileState);

這實際上告訴TypeScript：

相信我，這是一個有效的DialogNoConfigurationFileState ，我知道我在做什么。