A static factory method within an abstract class

Question

A static factory method within an abstract class

I am currently developing a class system using Typescript. The main structure consists of an abstract class called Component, which includes a static method called create(). This method is utilized on child classes to generate specific instances.

abstract class Component {
    static build() {
       // additional logic can be added here, like caching to reuse instances
       return new this();
    }
}

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

Button.build(); // generates a Button instance
Input.build(); // generates an Input instance

Code available in TS Playground

Although this approach functions effectively in Javascript, it causes an error in Typescript at the line where new this() is triggered, with a message saying "Cannot create an instance of an abstract class."

Is there a way to inform Typescript that the method should only be invoked on derived instances and not directly on the main abstract class? Are there alternative methods to implement the required API?

typescript oop

Answer 1

Answer №1

Here we are dealing with the typeof Component, and given that Component is an abstract class, attempting to create a new instance of this is not allowed. Even if Component was not abstract, handling the return type of Button.build() in child classes would pose challenges.

To address this, some form of type hinting is necessary, such as using a 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

Answer 2

Here we are dealing with the typeof Component, and given that Component is an abstract class, attempting to create a new instance of this is not allowed. Even if Component was not abstract, handling the return type of Button.build() in child classes would pose challenges.

To address this, some form of type hinting is necessary, such as using a 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

Answer 3

Answer №2

One way to invoke a factory method without the necessity of generics is by performing type casting for achieving type safety within factory classes.

Here are two illustrative examples showcasing a class with an abstract structure and another with a non-abstract implementation:

/* eslint-disable prefer-destructuring, max-classes-per-file */

type Class<T> = new (...args: any[]) => T;

class BaseComponent {
  static a = 1;

  static build<C extends typeof BaseComponent = typeof BaseComponent>(this: C): InstanceType<C> {
    const a = this.a;
    return new this() as InstanceType<C>;
  }
}

abstract class AbstractComponent {
  static a = 1;

  static build<T extends AbstractComponent = AbstractComponent>(this: Class<T>): T {
    const This = (this as any) as typeof AbstractComponent; AbstractComponent; // Enabling type safety usage
    const a = This.a;
    return new this();
  }
}

class AButton extends AbstractComponent {
  x = 0;
}

class BButton extends BaseComponent {
  x = 0;
}

const aButton = AButton.build();
const bButton = BButton.build();

console.log(aButton.x, bButton.x);

Answer 4

One way to invoke a factory method without the necessity of generics is by performing type casting for achieving type safety within factory classes.

Here are two illustrative examples showcasing a class with an abstract structure and another with a non-abstract implementation:

/* eslint-disable prefer-destructuring, max-classes-per-file */

type Class<T> = new (...args: any[]) => T;

class BaseComponent {
  static a = 1;

  static build<C extends typeof BaseComponent = typeof BaseComponent>(this: C): InstanceType<C> {
    const a = this.a;
    return new this() as InstanceType<C>;
  }
}

abstract class AbstractComponent {
  static a = 1;

  static build<T extends AbstractComponent = AbstractComponent>(this: Class<T>): T {
    const This = (this as any) as typeof AbstractComponent; AbstractComponent; // Enabling type safety usage
    const a = This.a;
    return new this();
  }
}

class AButton extends AbstractComponent {
  x = 0;
}

class BButton extends BaseComponent {
  x = 0;
}

const aButton = AButton.build();
const bButton = BButton.build();

console.log(aButton.x, bButton.x);

A static factory method within an abstract class

Answer №1

Answer №2

Similar questions

JavaScript/Typescript is throwing an error because it is unable to access the property 'username' of an undefined object

What are the steps to fixing the TS2722 error that says you cannot call a possibly 'undefined' object?

React Typescript: The specified argument type cannot be assigned to the parameter type

Error in ReactJS: TypeError - Trying to convert undefined or null as an object

Troubleshooting Error in Converting a JSX File with Tailwind CSS and Typescript

Interface-derived properties

Detecting when users stop scrolling in Angular 5

An object in typescript has the potential to be undefined

What steps can I take to resolve the error message stating "Type X is not compatible with Type Y" in TypeScript?

Verification based on conditions for Angular reactive forms

Tips for RETRIEVING a particular cookie value in Angular version 14

Click to alter the style of an <li> element

Angular: Exploring the possibilities of condition-based click event implementation

Adding SVG to Component

Updating the Nuxt3 editing page with useFetch and $fetch for fetching data, along with a typed storage object that prevents loading issues

Does it make sense to start incorporating signals in Angular?

Error occurs after upgrading React app to vite due to node-fetch issue

Utilizing Angular2 with Firebase for efficient denormalized data queries

Error: The reference 'GetServerSideProps' is being incorrectly used as a type instead of a value. Perhaps you intended to use 'typeof GetServerSideProps' instead?

The type '{ }' does not include the properties 'params', 'isExact', 'path', 'url' from the 'match<Identifiable>' type