A guide on setting a default constructor as a parameter in TypeScript

Question

A guide on setting a default constructor as a parameter in TypeScript

Through collaboration with a fellow coder on StackOverflow, I have mastered the art of specifying a constructor as an argument to a class:

type GenericConstructor<T> = { new(): T; }

class MyClass<T> {
  subclass: T;
  constructor(
    SubClass: GenericConstructor<T>
  ) {
    this.subclass = new SubClass();
  }
}

class MySubClass1 { a = "" }

class MySubClass2 { b = "" }

const withSubClass1 = new MyClass(MySubClass1);
const withSubClass2 = new MyClass(MySubClass2);

If feasible, I now aim to incorporate a default SubClass so that users of MyClass have the option to use the default functionality without specifying a subclass.

Below is the code in which I tried to implement this feature (unfortunately without success):

type GenericConstructor<T> = { new(): T; }

class DefaultSubClass { c = "" }

class MyClass<T> {
  subclass: T;
  constructor(
    SubClass: GenericConstructor<T> = DefaultSubClass // <== error!!
  ) {
    this.subclass = new SubClass();
  }
}

// …sliced out for brevity

Upon execution, TypeScript throws the following error at me:

Type 'typeof DefaultSubClass' is not assignable to type 'GenericConstructor<T>'.
  Type 'DefaultSubClass' is not assignable to type 'T'.
    'DefaultSubClass' can be assigned to the constraint of type 'T', however 'T' might be instantiated with a different subtype of constraint '{}'.

Grateful for all the advice and assistance provided as always.

typescript

Answer 1

Answer №1

The issue with this code is that it cannot guarantee type safety due to the ability to specify an explicit type argument. For example, consider someone calling your constructor like this:

let obj1: MyClass<MySubClass1> = new MyClass();
let obj2: MyClass<MySubClass2> = new MyClass();

In these cases, there will be no type errors because the type parameter T can be inferred as MySubClass1 and MySubClass2 respectively. However, neither object created will actually meet the specified type annotation requirements. Furthermore, even if you manage to make it work for one of them, it won't work for both since the type arguments in angle brackets are removed at compile-time, making it impossible to determine which constructor to use at runtime.

To address this issue, a safer approach would be to use a static factory method that is not generic. This allows the caller to create a class with the default subclass by using MyClass.create(), without the ability to demand a different type for T.

class MyClass<T> {
  static create(): MyClass<DefaultSubClass> {
    return new MyClass(DefaultSubClass);
  }

  subclass: T;
  constructor(
    SubClass: GenericConstructor<T>
  ) {
    this.subclass = new SubClass();
  }
}

Answer 2

The issue with this code is that it cannot guarantee type safety due to the ability to specify an explicit type argument. For example, consider someone calling your constructor like this:

let obj1: MyClass<MySubClass1> = new MyClass();
let obj2: MyClass<MySubClass2> = new MyClass();

In these cases, there will be no type errors because the type parameter T can be inferred as MySubClass1 and MySubClass2 respectively. However, neither object created will actually meet the specified type annotation requirements. Furthermore, even if you manage to make it work for one of them, it won't work for both since the type arguments in angle brackets are removed at compile-time, making it impossible to determine which constructor to use at runtime.

To address this issue, a safer approach would be to use a static factory method that is not generic. This allows the caller to create a class with the default subclass by using MyClass.create(), without the ability to demand a different type for T.

class MyClass<T> {
  static create(): MyClass<DefaultSubClass> {
    return new MyClass(DefaultSubClass);
  }

  subclass: T;
  constructor(
    SubClass: GenericConstructor<T>
  ) {
    this.subclass = new SubClass();
  }
}

Answer 3

Answer №2

If this behavior aligns with your requirements, there are two possible approaches that come to mind, each with its own set of drawbacks.

The first approach involves utilizing a generic parameter default for T:

class DefaultSubClass { c = "hey" }
class OtherSubClass { d = 123 };

class MyClass<T = DefaultSubClass> {
  subclass: T;
  constructor(
    SubClass?: new () => T
  );
  constructor(SubClass?: new () => any) {
    if (!SubClass) SubClass = DefaultSubClass;
    this.subclass = new SubClass();
  }
}

console.log(new MyClass().subclass.c.toUpperCase()); // HEY
console.log(new MyClass(OtherSubClass).subclass.d.toFixed(2)) // 123.00

This solution behaves as expected, but note the necessity to overload the constructor in order to address potential assignment issues between DefaultSubClass and T.

While relatively straightforward, it allows for the possibility of using the zero-argument constructor and manually specifying an incorrect T value:

console.log(new MyClass<OtherSubClass>().subclass.d.toFixed(2)); // oops

To prevent such unintended calls, another option is to weakly type the class constructor and then strengthen the typization by employing a type assertion to avoid compiler errors. This method is akin to scripting the constructor in pure JavaScript before enforcing TypeScript's strong typing as a library through declaration:

class _MyClass {
  subclass: any;
  constructor(ctor: new () => any = DefaultSubClass) {
    this.subclass = new ctor();
  }
}

The above represents the actual constructor function. The desired types can be specified as follows:

interface MyClass<T> {
  subclass: T;
}
interface MyClassCtor {
  new(): MyClass<DefaultSubClass>;
  new <T>(ctor: new () => T): MyClass<T>;
}

In this scenario, MyClassCtor consists of dual constructor signatures - one creating only MyClass<DefaultSubClass>, while the other generates MyClass<T> based on the provided T. The constructor value is then assigned to a variable conforming to the constructor type:

const MyClass = _MyClass as MyClassCtor;

Subsequently, the following code continues to achieve the intended functionality:

console.log(new MyClass().subclass.c.toUpperCase()); // HEY
console.log(new MyClass(OtherSubClass).subclass.d.toFixed(2)) // 123.00

Moreover, attempting the following operation will now result in an error:

new MyClass<OtherSubClass>(); // error! wrong number of arguments

Regrettably, these steps involve renaming MyClass temporarily and asserting a specific type due to the existing limitations surrounding constructor type parameters, which complicates direct implementation. Nonetheless, I hope one of these methods proves beneficial. Best of luck!

Click here for Playground link

Answer 4

If this behavior aligns with your requirements, there are two possible approaches that come to mind, each with its own set of drawbacks.

The first approach involves utilizing a generic parameter default for T:

class DefaultSubClass { c = "hey" }
class OtherSubClass { d = 123 };

class MyClass<T = DefaultSubClass> {
  subclass: T;
  constructor(
    SubClass?: new () => T
  );
  constructor(SubClass?: new () => any) {
    if (!SubClass) SubClass = DefaultSubClass;
    this.subclass = new SubClass();
  }
}

console.log(new MyClass().subclass.c.toUpperCase()); // HEY
console.log(new MyClass(OtherSubClass).subclass.d.toFixed(2)) // 123.00

This solution behaves as expected, but note the necessity to overload the constructor in order to address potential assignment issues between DefaultSubClass and T.

While relatively straightforward, it allows for the possibility of using the zero-argument constructor and manually specifying an incorrect T value:

console.log(new MyClass<OtherSubClass>().subclass.d.toFixed(2)); // oops

To prevent such unintended calls, another option is to weakly type the class constructor and then strengthen the typization by employing a type assertion to avoid compiler errors. This method is akin to scripting the constructor in pure JavaScript before enforcing TypeScript's strong typing as a library through declaration:

class _MyClass {
  subclass: any;
  constructor(ctor: new () => any = DefaultSubClass) {
    this.subclass = new ctor();
  }
}

The above represents the actual constructor function. The desired types can be specified as follows:

interface MyClass<T> {
  subclass: T;
}
interface MyClassCtor {
  new(): MyClass<DefaultSubClass>;
  new <T>(ctor: new () => T): MyClass<T>;
}

In this scenario, MyClassCtor consists of dual constructor signatures - one creating only MyClass<DefaultSubClass>, while the other generates MyClass<T> based on the provided T. The constructor value is then assigned to a variable conforming to the constructor type:

const MyClass = _MyClass as MyClassCtor;

Subsequently, the following code continues to achieve the intended functionality:

console.log(new MyClass().subclass.c.toUpperCase()); // HEY
console.log(new MyClass(OtherSubClass).subclass.d.toFixed(2)) // 123.00

Moreover, attempting the following operation will now result in an error:

new MyClass<OtherSubClass>(); // error! wrong number of arguments

Regrettably, these steps involve renaming MyClass temporarily and asserting a specific type due to the existing limitations surrounding constructor type parameters, which complicates direct implementation. Nonetheless, I hope one of these methods proves beneficial. Best of luck!

Click here for Playground link

A guide on setting a default constructor as a parameter in TypeScript

Answer №1

Answer №2

Similar questions

Keep an ear out for updates on object changes in Angular

A step-by-step guide on leveraging swagger-autogen in TypeScript applications

PageObjectModel Playwright, execute the locator().all() function - 'The execution context has been terminated, possibly due to navigating to another...'

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

Setting up TypeScript in an Angular 2 project and integrating Facebook login

Poorly packaged library - Custom Angular library - Node Package Manager

Instructions on transferring information from the app.component to its child components

Validating nested objects in YUP with the potential for zero or multiple properties present

Generating a unique serial ID using Angular/JS

Utilizing lodash and Angular 8: Identifying an valid array index then verifying with an if statement

The type declaration for the Storage.prototype.setObject method

The TypeScript declarations for the scss module are malfunctioning

Gatsby website failing to create slugs as anticipated

There was an issue thrown during the afterAll function: Unable to access properties of undefined

Is there a way to achieve a seamless compilation in TypeScript?

What is the best way to insert a placeholder React element into a different Component using TypeScript?

Tips for saving a variable in Angular that is being received through a subscription as JSON:

Learn how to connect a formArray from the parent component to the child component in Angular with reactive forms, allowing you to easily modify the values within the formArray

Steps for incorporating a type declaration for an array of objects in a React application with TypeScript

Encountering an issue accessing a property retrieved from a fetch request in TypeScript