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

Guide to creating two-way data binding using ngModel for custom input elements like radio buttons

Try skipping ahead to the following spec file even if the initial spec has not been completed yet

Is it possible for Typescript to resolve a json file?

The function __WEBPACK_IMPORTED_MODULE_3_ionic_native__.a.open is returning an error

Anticipate that the typescript tsc will generate an error, yet no error was encountered

What is the best way to time a Google Cloud Function to execute at the exact second?

Is your async function lacking a return statement?

Setting null for HttpParams during the call

Incorrectly selecting an overload in a Typescript partial interface can lead to errors

Angular 6 Checkbox Selector - Filtering Made Easy

Incorporate keyboard input functionality into an object wrapper

Revamp the Next.js and TypeScript API for improved efficiency

Warning: Google Map API alert for outdated Marker Class

What is the best way to transform a for loop using array.slice into a for-of loop or map function in order to generate columns and rows

Refining Generic Types in TypeScript

Retrieve type definitions for function parameters from an immutable array containing multiple arrays

Improve the way you manage the active selection of a button

What is the reason behind Webpack's behavior of loading all files from a folder during lazy loading

When working with TypeScript for initial data, you have the choice between using interface types or class types. Which approach is the

Retrieving information from various tkinter frames in a data object