如何在TypeScript中扩展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，但这似乎在这里是多余的。

- Kousha

Answer 1

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接口或者使用交叉类型。如果你使用交叉类型，那么完整的示例将如下所示：

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>
        );
    }
}

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

- Hardik Modha

Answer 2

现在假设您无法修改BaseClass（第三方代码），使其接受泛型类型。

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

}

您仍然可以重新定义BaseClass，并扩展属性类型，如下所示：

const SuperClass = BaseClass as React.ComponentClass<
  BaseProps & {
    somethingElse: string;
  }
>;

---

例如在完整的代码中，SomeInput 实际上支持 autoFocus 属性，但是它导出的属性类型定义不包括此属性：

import { Input as SomeInput, InputPropsType as SomeInputPropsType } from 'somewhere';

const Input = SomeInput as React.ComponentClass<
  SomeInputPropsType & {
    autoFocus?: boolean;
  }
>;

// Now passing `autoFocus` prop to `Input` should be fine

- justin