如何在扩展React组件的抽象类中使用泛型？

Question

我正在创建一个扩展React组件的抽象类，我希望能够设置一些默认的Props，但也让扩展抽象类的组件提供自己的道具。

interface Props {                                                                       
  someProps: boolean                                                                    
}                                                                                       

abstract class AbstractPureForm<P, S> extends React.Component<Props & P, S> {
  ...
}

如何使用：

class Other extends AbstractPureForm<{ newProps: string}, {}> { 
  ...
}

现在这个设置给了我错误：

does not exist on type '(Props & P)["..."]'

Answer 1

参考：How to write an abstract class for a component (with extendable state & props)?

编写抽象类

而不是Props & P（根据我所知，没有办法将此作为泛型类型参数指定），您的抽象类应该为其类型{{{{{{ 1}}：

P extends Props

编写具体的子类

通过扩展export interface Props { someProps: boolean; } export abstract class AbstractPureForm<P extends Props, S> extends React.Component<P, S>{ // ... } 接口

提供道具

您的具体子类Props应该接受通过Other显式扩展抽象类Props接口的道具：

OtherProps extends Props

通过与interface OtherProps extends Props { newProps: string; } class Other extends AbstractPureForm<OtherProps, {}> { // ... } 界面交叉

提供道具

你可以通过创建类型Props（你的具体子类和抽象类的道具的交集）同样地使用你最初做过的交集类型：

OtherConcreteProps & Props