如何在打字稿中扩展 React 类

Question

这是一个简单的例子：

interface BaseProps {
    name: string;
}

class BaseClass<P extends BaseProps> extends React.Component<P, void> {

}

interface SuperProps {

}

class SuperClass extends BaseClass<SuperProps> {

} 

我希望 SuperClass 默认情况下会有this.props.name. 但是现在，我收到一个编译错误，说Type 'SuperProps' does not satisfy the constraint 'BaseProps'.Property 'name' is missing in type 'SuperProps'.

我究竟做错了什么？我意识到我可以做到，SuperProps extends BaseProps但这在这里似乎是多余的。

Answer 1

class BaseClass<P extends BaseProps> extends React.Component<P, void>

where<P extends BaseProps>表示扩展的任何有效类型都BaseProps可以分配给BaseClass. 这就是泛型的工作方式。

现在，当你做

interface SuperProps {

}

class SuperClass extends BaseClass<SuperProps> {

} 

您正在分配SuperProps不扩展BaseProps. 这就是您收到错误的原因。

为了克服错误，正如您所说，您要么需要扩展BaseProps接口，要么可以使用交叉类型。如果您使用交集类型，则完整示例将如下所示：

export interface BaseProps {
    name: string;
}

class BaseClass<P> extends React.Component<P & BaseProps, void> {

}

interface SuperProps {

}

class SuperClass extends BaseClass<SuperProps> {
    render(): JSX.Element {
        return (
            <div>
                {this.props.name} {/* Won't throw an error*/}
            </div>
        );
    }
}

您可以在此处阅读有关高级类型的更多信息。