javascript - 如何创建一个扩展 React.Component 的 BaseClass，以便我的所有其他类都扩展 BaseClass 并可以指定自己的 Props 和 State 类型？

Question

例如，在 vanilla JS 中我可以轻松地执行以下操作:

class BaseClass extends React.Component { ... }

class Foo extends BaseClass { ... }

ReactDOM.render(<Foo />, someEl)

它就可以正常工作，没问题。

但是，我似乎无法在 TypeScript 中完成如此简单的事情。我尝试做

class BaseClass<P,S> extends React.Component<P,S> { ... }

interface IFooProps {...}
interface IFooState {...}
class Foo extends BaseClass<IFooProps, IFooState> { ... }

ReactDOM.render(<Foo />, someEl)

但是失败并出现类似错误

ERROR in ./src/app.tsx
(44,17): error TS2605: JSX element type 'Foo' is not a constructor function for JSX elements.
  Property 'setState' is missing in type 'Foo'.

ERROR in ./src/app.tsx
(44,17): error TS2607: JSX element class does not support attributes because it does not have a 'props' property

ERROR in ./src/Foo.tsx
(30,49): error TS2339: Property 'props' does not exist on type 'Foo'.

我的问题是，我们如何扩展React.Component以创建一个基类，其中基类的子类仍然可以指定其 Prop 和状态的类型，以便我可以做

class Foo extends BaseClass<IFooProps, IFooState> { ... }

BaseClass 是从 React.Component 扩展而来的？

Answer 1

下面的代码完全没问题:

class BaseClass<P,S> extends React.Component<P,S> { ... }

并且工作正常，例如我使用它向 alm 中的 React 组件添加自定义行为:https://github.com/alm-tools/alm/blob/5ff516f0212f75c7365a56104413d34dddcbf429/src/app/ui.tsx#L11