与TypeScript反应-类型{...}不能分配给'Readonly<S>'

我使用抽象类作为父React组件,在我的应用程序中扩展了许多子组件.

它有一个默认状态以及几个类方法,可以选择从扩展组件覆盖它们.

抽象组件如下所示:

import * as React from 'react';

export interface StatefulProps {
  observers?: Array<(context: any, state: object) => any>;
}
export interface StatefulState {
  machine: {
    [propName: string]: any;
  };
  name: string;
  value?: any;
}

export default abstract class StatefulComponent
 extends React.Component {
  static defaultProps = {
    observers: [],
  };

  state = {
    machine: {},
    name: '',
  };

  abstract generateState(stateName: string, stateParam?: any): object;

  shouldComponentUpdate(_: P, nextState: S) {
    const { name } = this.state;
    if (nextState && nextState.name !== name) {
      return true;
    }
    return false;
  }

  goToState = (stateName: string, stateParam?: any) => {
    const { observers } = this.props;
    this.setState(
      {
        name: stateName,
        machine: this.generateState(stateName, stateParam),
      },
      () => {
        if (observers && observers.length) {
          observers.forEach(observer => {
            if (observer instanceof Function) {
              observer(this, this.state);
            }
          });
        }
      }
    );
  }
}

然而,tslint强调了状态,它在悬停时显示以下错误:

Property 'state' in type 'StatefulComponent' is not assignable to the same property in base type 'Component'.
Type '{ machine: {}; name: string; }' is not assignable to type 'Readonly'.