Как создать универсальный класс, расширяющий React.Component?

Question

Я использую Flow.js в своем приложении React.

В нем я создал обычай Form расширение компонента React.Component:

import * as React from 'react'

class Form extends React.Component<FormProps, FormState> {
  // utils for form-handling logic in my form components
}

Вот мои типы форм:

export type ValidationResult = Array<string>
export type Validator = (value: any) => string | false

export type CompositeValidationResult = { [string]: ValidationResult };

export type FormData = { [string]: any };
export type FormErrors = { [string]: ValidationResult };
export type FormValidators = { [string]: Array<Validator> };

export type FormSetErrors = (FormErrors) => void
export type FormSetSubmitting = (boolean) => void
export type FormOnClean = (FormData, FormValidators, FormSetErrors) => FormData | false
export type FormOnSubmit = (FormData, FormSetSubmitting, FormSetErrors) => void

export type FormProps = {
  initialData: FormData,
  validators?: FormValidators,
  onClean: FormOnClean,
  onSubmit: FormOnSubmit
}

export type FormState = {
  isSubmitting: boolean,
  data: FormData,
  errors: FormErrors
}

Все идет нормально!

Теперь я пытаюсь наследовать от моей формы в другом компоненте, SignInForm, Эта форма отличается от Form таким образом, что он ожидает еще одно свойство, onHide имущество. Просто использование этой опоры в моем компоненте дает мне следующую ошибку:

Error: js/containers/SignInForm/SignInForm.js:20
 20:     const { onHide } = this.props
                 ^^^^^^ property `onHide`. Property not found in
 20:     const { onHide } = this.props
                            ^^^^^^^^^^ FormProps

Хорошо, работает как задумано, теперь давайте создадим пользовательский тип для расширенных реквизитов:

type Props = {
  onHide: () => void
}

class SignInForm extends Form {
  props: FormProps & Props

  // some SignInForm specific stuff
}

Но это приводит к следующей ошибке:

 10: class SignInForm extends Form {
           ^^^^^^^^^^ SignInForm. Cannot extend
 10: class SignInForm extends Form {
                              ^^^^ Form
  Property `props` is incompatible:
      6: class Form extends React.Component<FormProps, FormState> {
                                            ^^^^^^^^^ FormProps. This type is incompatible with. See: js/components/Form/Form.js:6
     11:   props: FormProps & Props
                              ^^^^^ Props
      Property `onHide` is incompatible:
         11:   props: FormProps & Props
                                  ^^^^^ property `onHide`. Property not found in
          6: class Form extends React.Component<FormProps, FormState> {
                                                ^^^^^^^^^ FormProps. See: js/components/Form/Form.js:6

Я также попытался пойти другим путем:

type Props = {
  onHide: () => void
}

class SignInForm extends Form<FormProps & Props, FormState> {
  // ...
}

Но это приводит к более длинной ошибке:

Error: js/containers/SignInForm/SignInForm.js:10
 10: class SignInForm extends Form<FormProps & Props, FormState> {
           ^^^^^^^^^^ SignInForm. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:10
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:10
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ variance check: `Form`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:12
 12:     this.onChange('username', ev.currentTarget.value)
         ^^^^^^^^^^^^^ property `onChange`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:16
 16:     this.onChange('password', ev.currentTarget.value)
         ^^^^^^^^^^^^^ property `onChange`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:20
 20:     const { onHide } = this.props
                            ^^^^^^^^^^ property `props`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:21
 21:     const { data, errors, isSubmitting } = this.state
                                                ^^^^^^^^^^ property `state`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Error: js/containers/SignInForm/SignInForm.js:25
 25:         <form onSubmit={this.onSubmit}>
                             ^^^^^^^^^^^^^ property `onSubmit`. Expected polymorphic type instead of
 10: class SignInForm extends Form<FormProps & Props, FormState> {
                              ^^^^ statics of `Form`

Из этого я понимаю, что пока React.Component может быть универсального типа, Form нет, но я понятия не имею, как продолжить отсюда. Мне было интересно, если можно предложить совместимые типы через:

class Form extends React.Component<P:FormProps, S:FormState>

Но это синтаксическая ошибка.

Так что я в растерянности, ищу решение, но мои поиски пока ничего не дали.