What is the best way to define a general class within the constructor of another class in TypeScript?

Question

What is the best way to define a general class within the constructor of another class in TypeScript?

Is there a way to inject a subclass into a class during its constructor using TypeScript?

I've tried to demonstrate my idea with some pseudo-code here:

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

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

class MySubClass1 {}

class MySubClass2 {}

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

The issue is that TypeScript doesn't seem to allow specifying a generic parameter for a constructor. I think I might be missing something here.

My goal is to have a class (MyClass) that can accept a generic child class which meets specific interface requirements. Maybe defining an interface would be the right approach, but I'm not sure how to go about it.

Thank you in advance for your assistance!

typescript

Answer 1

Answer №1

It's not possible to declare a generic `constructor` method because it could conflict with the class itself being generic. For example:

class Foo<T> { constructor<U>() { } } // error, but imagine no error

If this were allowed, when calling `new Foo<X>()`, it would be unclear if `X` refers to `T`, `U`, neither, or both. There are workarounds for this situation, but in your case, they may not be necessary.

Instead, if you want `withSubClass1` to have its `subclass` property remember that it is of type `SubClass1`, and similarly for `withSubClass2`, then `MyClass` should be generic in the type of the `subclass` property. Let the compiler infer this type from the constructor parameter:

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

When constructing instances, you get:

const withSubClass1 = new MyClass(MySubClass1);
// const withSubClass1: MyClass<MySubClass1>

const withSubClass2 = new MyClass(MySubClass2);
// const withSubClass2: MyClass<MySubClass2>

Assuming `MySubClass1` and `MySubClass2` have distinct structures:

class MySubClass1 { a = "" }
class MySubClass2 { b = "" }

Instances of `MyClass` will have that structure in their `subclass` property:

withSubClass1.subclass.a.toUpperCase(); // okay
withSubClass2.subclass.b.toLowerCase(); // okay

I hope this explanation helps and wish you good luck!

Link to Playground code

Answer 2

It's not possible to declare a generic `constructor` method because it could conflict with the class itself being generic. For example:

class Foo<T> { constructor<U>() { } } // error, but imagine no error

If this were allowed, when calling `new Foo<X>()`, it would be unclear if `X` refers to `T`, `U`, neither, or both. There are workarounds for this situation, but in your case, they may not be necessary.

Instead, if you want `withSubClass1` to have its `subclass` property remember that it is of type `SubClass1`, and similarly for `withSubClass2`, then `MyClass` should be generic in the type of the `subclass` property. Let the compiler infer this type from the constructor parameter:

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

When constructing instances, you get:

const withSubClass1 = new MyClass(MySubClass1);
// const withSubClass1: MyClass<MySubClass1>

const withSubClass2 = new MyClass(MySubClass2);
// const withSubClass2: MyClass<MySubClass2>

Assuming `MySubClass1` and `MySubClass2` have distinct structures:

class MySubClass1 { a = "" }
class MySubClass2 { b = "" }

Instances of `MyClass` will have that structure in their `subclass` property:

withSubClass1.subclass.a.toUpperCase(); // okay
withSubClass2.subclass.b.toLowerCase(); // okay

I hope this explanation helps and wish you good luck!

Link to Playground code

What is the best way to define a general class within the constructor of another class in TypeScript?

Answer №1

Similar questions

Using GitHub Actions to automatically publish a Typescript Package: A Step-by-Step Guide

What is the best way to set up an endpoint in Angular for image uploading?

Bidirectional data binding in Angular 2 allows for communication between parent components and directives

Clicking on a component in Nuxt will trigger it to open

The updated values in an Angular application may not always be accurately represented by interpolated values

Error: Failed to load chunk 552 due to chunk loading issue

Enforce boundaries by constraining the marker within a specified polygon on a leaflet map

"From time to time, reimport React when saving to ensure all necessary imports are

What benefits does Observable provide compared to a standard Array?

Communicating with an ASP.NET Controller using Angular2: A Step-by-Step Guide

How can I apply concatMap in Angular?

Is there a way to prompt TypeScript to report an error when a mapped key is missing?

A mistake occurred: The function this.http.get(...) is not supported with the method map within BookService.push

Navigating Through Angular Components

What is the process for including a unique attribute for child elements within a React component using TypeScript?

Obtain the file path relative to the project directory from a Typescript module that has been compiled to JavaScript

Enhance the readability of your Angular/Ionic applications with proper hyphenation

How can you incorporate TypeScript's dictionary type within a Mongoose schema?

The response from the Http GET request in the Angular web service app was delayed

TypeScript is encountering difficulty locating a node module containing the index.d.ts file