为什么扩展打字稿类会导致反应工厂方法在基类上工作时编译失败？答案

【问题标题】：Why does extending a typescript class cause a react factory method to fail on compilation when it works on the base class?为什么扩展打字稿类会导致反应工厂方法在基类上工作时编译失败？
【发布时间】：2016-09-19 00:14:10
【问题描述】：

我正在编写数百行长的代码，但已将我的问题归结为以下示例。我的问题是为什么 Typescript 编译器在一种情况下失败，但在使用基础类时成功。

以下代码编译得很好：

import * as React from "react";

interface ComponentProps {
}

class Component<P extends ComponentProps> extends React.Component<P, any> {
}

interface RootComponentProps extends ComponentProps {
    viewManager?: ViewManager;
}

class RootComponent<P extends RootComponentProps> extends Component<P> {

    static childContextTypes = {
        viewManager: React.PropTypes.object
    }

    private _viewManager: ViewManager;

    getChildContext(): RootComponentProps {
        return { viewManager: this._viewManager }
    };
}

class ViewManager {
    constructor(managedElement: HTMLElement, rootComponent: typeof Component) {
        const rootFactory = React.createFactory(rootComponent);
    }
}

但是，如果我进行一项更改，在 ViewManager 的构造函数中将“typeof Component”更改为“typeof RootComponent”，编译器（和 VS2015 Intellisense）会报错：

import * as React from "react";

interface ComponentProps {
}

class Component<P extends ComponentProps> extends React.Component<P, any> {
}

interface RootComponentProps extends ComponentProps {
    viewManager?: ViewManager;
}

class RootComponent<P extends RootComponentProps> extends Component<P> {

    static childContextTypes = {
        viewManager: React.PropTypes.object
    }

    private _viewManager: ViewManager;

    getChildContext(): RootComponentProps {
        return { viewManager: this._viewManager }
    };
}

class ViewManager {
    constructor(managedElement: HTMLElement, rootComponent: typeof RootComponent) {
        const rootFactory = React.createFactory(rootComponent);
    }
}

错误在 React.createFactory 方法的参数中，并说：

错误 TS2345：构建：“typeof RootComponent”类型的参数不可分配给“ComponentClass”类型的参数 |无状态组件'.

将鼠标悬停在 React.createFactory 的参数上时，VS 2015 Intellisense 会提供更多信息，即：

类型 'typeof RootComponent' 提供不匹配的签名 '(props?:any, context?:any):ReactElement'

这一切的另一个奇怪的怪癖......关于缺少 childContextTypes。

我知道这并不是真正的魔法，但目前对我来说这似乎是黑魔法，任何澄清的见解都将不胜感激。

【问题讨论】：

经过一番试验后，我很确定这是一个错误。我会在 TS repo 上提交一个问题。
我没有收到您似乎遇到的错误，您确定这段代码给您带来了问题吗？
非常确定我明白了。但也许您的经验指向打字文件问题。我的反应类型文件来自 Github 上的 ExplainedTyped，但与 React 本身相比，我承认它已经过时了。我的天哪，打字文件声称适用于 React v0.14。也许您的打字文件是最新的。你能分享一下你从哪里得到的吗？
我正在使用相同版本的定义文件，我知道没有更新的东西（尝试使用@types 安装它，你会得到相同的结果）。您确定您发布的代码足以重现错误吗？也许您的代码中还有其他内容未在您的问题中发布导致此错误？（另外，请务必在您回复时标记我，以便我收到通知）
谢谢@NitzanTomer - 我似乎找到了一种解决方法。当您查看时，我查看了 Github 上包含已知问题的自述文件，它提供了一个见解（请参阅我将要写给这个问题的答案），帮助我解决这个问题。它仍然没有回答为什么我看到这个问题而你没有，对此我仍然很好奇，但至少我有前进的道路！

标签： inheritance reactjs typescript

【解决方案1】：

复习了cmets来提问后，我开始怀疑typings。我发现了以下helpful gotcha。

关键是给我的childContextTypes添加显式类型注解如下：

static childContextTypes: React.ValidationMap<any> = {
    viewManager: React.PropTypes.object
}

这解决了相当迟钝的编译错误。我还没有工作和测试过所有代码是否有效，但这对于这种情况肯定是一个可行的解决方法，根据链接，这应该在 Typescript 2.0 中修复。

【讨论】：