Question

我的Typescript / React app中有一个抽象的Row类：

export interface IAbstractRowProps {
    assignedValueY: IValue;
    valueZId?: number;
    matrixStore?: MatrixStore;
}
export abstract class AbstractRow extends React.Component<IAbstractRowProps, {}> {
    // ...

conrecte组件继承自：

export default class DayRow extends AbstractRow {
    protected getCellItems(): ICellItem[] {
        // ...
    }
}

然后我希望第二个组件继承DayRow。但我也想扩展这个组件的道具。像这样：

export interface IDayFinderRowProps extends IAbstractRowProps {
    anotherProp: boolean;
}

export default class DayFinderRow<IDayFinderRowProps, {}> extends DayRow {
    protected getCellItems(): ICellItem[] {
        // ...
    }
}

此语法会产生错误。我甚至可以实现或者必须将我可能需要的所有道具添加到IAbstractRowProps界面？

Answer 1

您需要自己制作DayRow和AbstractRow通用，以便通用类型可以流向React.Component。对于DayRow，您可以指定默认类型，因此您可以在不指定通用参数的情况下对其进行实例化。

export abstract class AbstractRow<T extends IAbstractRowProps> extends React.Component<T, {}> {
}

export class DayRow<T extends IAbstractRowProps = IAbstractRowProps> extends AbstractRow<T> {

}
export class DayFinderRow extends DayRow<IDayFinderRowProps> {

}

Typescript：扩展自定义父React.Component的prop接口

1 个答案: