Reactjs / Typescript: How To Extend State Interface

I have the following: interface EditViewState { entity?: T; } abstract class EditView extends React.Component & S>

Solution 1:

For now I have a workaround by using Exclude

abstractclassEditView<T, P, S> extendsReact.Component<P, Exclude<EditViewState<T> & S, keyof S>> {

 constructor(props: P, ctx: any) {
      super(props, ctx);
      //@ts-ignore https://github.com/microsoft/TypeScript/issues/38947this.state = {
          mode: "loading"
      }
  }

  componentDidMount() {
      this.setState({ mode: "show" })
  }
}

With that everything works perfect. The concrecte class now has the auto completion for the states of EditViewState and it's own states S.