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

【问题标题】：Typescript: Extend prop interface of custom parent React.ComponentTypescript：扩展自定义父 React.Component 的 prop 接口
【发布时间】：2018-05-26 04:24:31
【问题描述】：

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

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

一个具体的组件继承自：

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 接口？

【问题讨论】：

标签： reactjs typescript

【解决方案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> {

}

【讨论】：