Static factory method in abstract class

Question

I am building a class system in Typescript. There is a main abstract class Component, that has a static method create(). This method will be called on children to build a particular instance

abstract class Component {
    static build() {
       // some additional logic here, for example, cache to reuse instances
       return new this();
    }
}

class Button extends Component { }
class Input extends Component {}

Button.build(); // returns Button instance
Input.build(); // returns Input instance

Same code in TS Playground

This approach works well in Javascript, but Typescript reports an error at the line new this(), saying "Cannot create an instance of an abstract class."

How can I explain typescript that method will be called on derived instances, but not on the main abstract class directly? Maybe there are other ways to implement the API that I needed?

Answer 1

this is typeof Component, and since Component is abstract class, new this is inadmissible. Even if Component wasn't abstract, Button.build() return type wouldn't be properly handled in child classes.

It requires some type hinting, via generic method:

abstract class Component {
    static build<T = Component>(this: { new(): T }) {
       return new this();
    }
}

class Button extends Component { }

const button = Button.build<Button>(); // button: Button