Question

起点是我想要扩展的库类。在我的特定情况下，我正在创建React组件。这里有一些简单的填充代码来表示一个库类（为了让这个例子保持无依赖性）。

class ReactComponent<T, U> {
    render() { return "some html"; }
}

我想用自定义界面扩展我的一些React组件。例如，我有一个Page界面，表示顶级网页的组件，并且它们具有title和shouldRenderInAppLayout等属性。

interface Page {
    title: string;
    shouldRenderInAppLayout: boolean;
}

以下是我的网页组件的外观：

class Homepage extends ReactComponent<any, any> implements Page {
    title: "Welcome";
    shouldRenderInAppLayout: true;

    render() { return "some other html"; }
}

最后，我想编写一个利用React Component s和Page s的对象的函数：

function customRender(component: typeof ReactComponent & Page) {
    if (component.shouldRenderInAppLayout) {
        // layout code
    }
    // code to render component here
}

customRender(Homepage);

但是这失败并出现以下错误：

'typeof Homepage'类型的参数不能分配给'typeof ReactComponent＆amp;的类型参数。页'。类型'typeof Homepage'不能分配给'Page'类型。 'typeof Homepage'类型中缺少属性'title'。

以上是上述代码的可运行示例：Here's a codepen I created

如何表示customRender的类型？

Answer 1

这没有意义。你有要检查的实例属性，但React组件作为构造函数传递，你肯定不应该从外部进入类实例来查询实例化＆＃39;属性或方法。

编写的代码没有被正确考虑。在您尝试阅读shouldRenderInAppLayout之后，React将实例化类。你需要一些包装对象来表示标志和可能呈现的东西。

如何编码需要特定超类和接口实现的类型？

1 个答案: