reactjs - 当非抽象类可以正常工作时，为什么不能使用 TypeScript 抽象类的类型来创建 React 工厂？

Question

以下使用 React 的 Typescript 代码编译并运行良好:

import * as React from "react";

class MyComponent<P> extends React.Component<P, any> {
    static getFactory() {
        return React.createFactory(this);
    }
}

但是，除了类现在是抽象类之外，以下代码在各方面都相似，在编译时会在创建工厂的那一行抛出错误:

import * as React from "react";

abstract class MyComponent<P> extends React.Component<P, any> {
    static getFactory() {
        return React.createFactory(this);
    }
}

错误是:

error TS2345: Build:Argument of type 'typeof MyComponent' is not assignable to parameter of type 'ComponentClass<any> | StatelessComponent<any>'.

我想不出为什么类是否被标记为抽象会产生影响。

关于为什么会出现这种情况的任何见解？

================已添加 9/22/2016=============

在我上面的示例中，我可能应该将 MyComponent 称为 MyBaseComponent。这里的重点是我正在创建一个我不想实例化的框架组件。我只希望从 MyComponent 派生的东西被实例化。 (注意，例如，MyComponent 甚至没有声明 render() 方法。)

所以....我将一个真正要实例化的类声明为:

interface MyDerivedComponentProps {
    id: string;
}

class MyDerivedComponent extends MyComponent<MyDerivedComponentProps> {
    render() {
        return /* Some JSX rendering stuff here */
    }
}

请注意，这一切都很好......如果我不实例化 MyComponent 但实例化 MyDerivedComponent。但是用抽象关键字装饰 MyComponent 的简单行为，应该 用来确保 MyComponent 永远不会被直接实例化，导致这个编译器错误.我仍然认为不应该这样做。如果基类未标记为抽象，编译器会很好地处理继承。如果基类被标记为抽象，它也应该能很好地处理它，或者可能不是，但如果不是，为什么？

================已添加 2016 年 9 月 29 日=============

根据评论中的要求，这是一个完整的示例代码，显示了两者的声明和继承:

import * as React from "react";
import * as ReactDOM from "react-dom";

interface MyDerivedComponentProps {
    id: string;
}

// WORKING EXAMPLE
class MyBaseNonAbstractComponent<P> extends React.Component<P, any> {
    static getFactory() {
        return React.createFactory(this);  // NO COMPILER ERROR HERE
    }
}

class MyDerivedFromNonAbstractComponent extends MyBaseNonAbstractComponent<MyDerivedComponentProps> {
    render() {
        return <div>Hello from id {this.props.id}</div>;
    }
}

// NOT WORKING EXAMPLE
abstract class MyBaseAbstractComponent<P> extends React.Component<P, any> {
    static getFactory() {
        return React.createFactory(this); // HERE IS THE COMPILER ERROR
    }
}

class MyDerivedFromAbstractComponent extends MyBaseAbstractComponent<MyDerivedComponentProps> {
    render() {
        return <div>Hello from id {this.props.id}</div>;
    }
}

ReactDOM.render(MyDerivedFromNonAbstractComponent.getFactory()({ id: "idForNonAbstract" }), document.getElementById("managed-content-for-non-abstract"));

ReactDOM.render(MyDerivedFromAbstractComponent.getFactory()({ id: "idForAbstract" }), document.getElementById("managed-content-for-abstract"));

================已添加 9/29/2016 #2=============

肯定是这样的，无论基类是否被标记为抽象，如果它上面有一个静态方法，并且该方法引用了this，那么它实际上会解引用构造函数用于调用该方法的派生类的名称。

所以，如果我们有以下内容:

class BaseConcrete {
    static logWhoAmI() {
        console.log(`this is ${this}`);
    }
}

class DerivedConcrete extends BaseConcrete {
}

DerivedConcrete.logWhoAmI(); // This will log constructor of DerivedConcrete

abstract class BaseAbstract {
    static logWhoAmI() {
        console.log(`this is ${this}`);
    }
}

class DerivedAbstract extends BaseAbstract {
}

DerivedAbstract.logWhoAmI(); // This will log constructor of DerivedAbstract

因此，无论基类是否抽象，Typescript 似乎都不会以任何不同的方式处理基类的静态方法中引用的 this。

只是，不知何故，React.createFactory() 方法的签名在传递“this”时似乎以某种方式变得困惑。它提示是因为从表面上看，它似乎被传递给抽象方法的构造函数，这当然是非法的。但由于类本身是抽象的，运行时的 this 保证是派生类，React.createFactory 应该可以正常工作。事实上，正如一位评论者指出的那样，如果您将 React.createFactory 的参数转换为 any，它将在运行时正常工作。但在我看来，这是黑客攻击。感谢到目前为止的讨论。

Answer 1

抽象类不能用 new 直接实例化(这就是它们被这样称呼的原因)。因此，你不能将它们用作 React 组件。不过，它们可以是其他组件的基类。

这就是 TypeScript 编译器静态检查的内容。由于抽象类没有 new 运算符，因此无法将其强制转换为 ComponentClass。