这是一个简单的例子:
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 但这在这里似乎是多余的。
最佳答案
class BaseClass<P extends BaseProps> extends React.Component<P, void>
哪里<P extends BaseProps>表示扩展 BaseProps 的任何有效类型可分配给 BaseClass .这就是泛型的工作原理。
现在，当你这样做的时候
interface SuperProps {
}
class SuperClass extends BaseClass<SuperProps> {
}
您正在分配类型 SuperProps不扩展 BaseProps .这就是您收到错误的原因。
如您所说，要克服错误，您要么需要扩展 BaseProps接口(interface)，或者您可以使用交集类型。如果您使用交集类型，那么完整的示例将如下所示:
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>
);
}
}
您可以阅读有关高级类型的更多信息 here .
关于javascript - 如何在 typescript 中扩展 React 类，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43817597/