接口中有状态React.Component的打字稿定义

Question

What is the correct typing to define for a property that is assigned to a stateful React.Component inside an interface.

The TemplateConfiguration interface has two properties Page and Form . Page 's type is a stateless component (Presentational) and Form 's type should be a stateful component.

Page works fine, however, the compiler gives me an error two places and I'm not sure what is the proper typing. Please read the comments below.

interface ConfigProps {
  // ...
}

interface ConfigState {
 // ...
}

interface TemplateConfiguration<T> {

  Form: React.Component<ConfigProps, ConfigState>;
  Page: React.FunctionComponent<T>; // this one works here

}

const myConfig: TemplateConfiguration  = {
  Page: ({arg1, arg2}) => (<div>...</div>), // and works here
  Form: class extends React.Component<ConfigProps, ConfigState> {
      // ^^^^ --- Type 'typeof Form' is missing the following properties from type 'Component<ConfigProps, ConfigState, any>': context, setState, forceUpdate, render, and 3 more

    render() {
      return (<div>Some text here</div>);
    }
  }
}

class App extends React.Component {

  render() {
    const { Form, Page } = myConfig;
    return (
      <div>
        <Form  /> // JSX element type 'Form' does not have any construct or call signatures
      </div>
    );
  }
}

Answer 1

You have to use React.ComponentClass instead of React.Component

Form: React.Component<ConfigProps, ConfigState>;

should be

Form: React.ComponentClass<ConfigProps, ConfigState>;