通过生成构造函数将超类注入原始对象

Question

我正在制作一个用 Typescript2.0 编写的库，也可以从 javascript 中使用。

我有一个类 Component 和一个由 Typescript 制作的函数 registerComponent。

我需要通过调用registerComponent 来存储继承Component 的类的构造函数。我的库可以自动实例化注册的组件。 在某些情况下，方法的参数可能不是函数而是对象。我需要将对象转换为生成传递对象的构造函数。

但是，该构造函数也应该扩展 Component 类。 所以，我的意思是我想将一个类作为超类注入一个函数，该函数将使用 typescript 生成给定对象。

这是在 registerComponent 中处理原始对象的部分。

const newCtor = function() {
  Component.call(this);
};
const properties = {};
for (let key in obj) {
  properties[key] = { value: obj[key] };
}
newCtor.prototype = Object.create(Component.prototype, properties);
return newCtor;

obj 由用户提供普通对象。我认为这段代码可以工作，但实际上当我使用带有 new 关键字的构造函数时，这段代码会填充错误Uncaught TypeError: Class constructor Component cannot be invoked without 'new'。 该异常会在代码Component.call(this) 上引发。

如何通过注入超类创建有效的构造函数？

---

我很抱歉在这样模棱两可的帖子中提问。但现在我想我需要发布我想要实现的完整界面。

class Component{
    public baseFunction():string
    {
        return "This is base";
    }
}
class Registory{
   private static registeredConstructors:{[key:string]:(new()=>Component)};

   public static registerComponent(name:string,c:(new()=>Component)|{[key:string]:any}):void
   {
       if(typeof c === "function")
       {
           Registory.registeredConstructors[name] = c;
           return;
       }else{
           // Assume c is plain object
           // I need some code here to wrap c as constructor
       }
   }

   public static instanciate(name:string):Component
   {
       return new Registory.registeredContructors[name]();
   }
}

// When User want to register component via Typescript class

class C1 extends Component{
   public someProperty:string = "HELLO C1";

   public f1():string{
      return this.baseFunction() + this.someProperty;
   }
}

Registory.registerComponent("C1",C1);
const c1:Component = Registory.instanciate("C1");

// When user want to register component via plain object

Registory.registerComponent("C2",{
    someProperty:"Hello C2",
    f1:function(){
        return this.baseFunction() + this.someProperty;
    }
});
const c2:Component = Registory.instanciate("C2");

// This is the test c1 and c2 should pass

test.true(()=>c1 instanceof Component);
test.true(()=>c2 instanceof Component);
test.true(()=>c1.f1() === "This is base Hello C1");
test.true(()=>c2.f1() === "This is base Hello C2");
test.true(()=>c1 instanceof C1);

Answer 1

在我看来，如果我理解正确的话，你的场景可以更容易地解决：

abstract class Component {
    constructor(props: any) {}
}

type ComponentConstructor = {
    new (props: any): Component;
    name: string;
};

const REGISTRY = {} as { [name: string]: ComponentConstructor };
function registerComponent(ctor: ComponentConstructor) {
    REGISTRY[ctor.name] = ctor;
}

function instantiateComponent(name: string, props: any): Component;
function instantiateComponent<T extends Component>(name: string, props: any): T {
    if (typeof REGISTRY[name] !== "function") {
        return null;
    }

    return new REGISTRY[name](props) as T;
}

class MyComponent1 extends Component { }
registerComponent(MyComponent1);

class MyComponent2 extends Component { }
registerComponent(MyComponent2);

let comp1 = instantiateComponent("MyComponent1", {}); // typeof comp1 is Component
let comp2: MyComponent2 = instantiateComponent("MyComponent2", {}); // typeof comp2 is MyComponent2

(code in playground)

---

编辑

好的，既然我明白了你想要什么，那就更容易提供帮助了。
我仍然需要清理你的代码，但这是你想要的：

interface IComponent {
    someProperty: string;
    f1(): string;
}

abstract class Component implements IComponent {
    abstract someProperty: string;
    abstract f1(): string;

    public baseFunction(): string {
        return "This is base ";
    }
}

type ComponentConstructor = { new (): Component };

abstract class ComponentFromObject extends Component {
    constructor(obj: IComponent) {
        super();

        Object.assign(this, obj);
    }
}

class Registory {
    private static registeredConstructors: { [key: string]: ComponentConstructor } = {};

    public static registerComponent(name: string, c: ComponentConstructor | IComponent): void {
        if (typeof c === "function") {
            Registory.registeredConstructors[name] = c;
        } else {
            Registory.registeredConstructors[name] = ComponentFromObject.bind(null, c);
        }
    }

    public static instanciate(name: string): Component {
        return new Registory.registeredConstructors[name]();
    }
}
const registory = new Registory();

// When User want to register component via Typescript class

class C1 extends Component {
    public someProperty: string = "Hello C1";

    public f1(): string {
        return this.baseFunction() + this.someProperty;
    }
}

Registory.registerComponent("C1", C1);
const c1: Component = Registory.instanciate("C1");

// When user want to register component via plain object

Registory.registerComponent("C2", {
    someProperty: "Hello C2",
    f1: function(){
        return this.baseFunction() + this.someProperty;
    }
});
const c2: Component = Registory.instanciate("C2");

// This is the test c1 and c2 should pass

console.log(c1 instanceof Component);
console.log(c2 instanceof Component);
console.log(c1.f1() === "This is base Hello C1");
console.log(c2.f1() === "This is base Hello C2");
console.log(c1 instanceof C1);

(code in playground)