如何使用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 ，我知道我在做什么。