TypeScript: Extending a Generic Type with a Class

Question

TypeScript: Extending a Generic Type with a Class

Although it may seem generic, I am eager to create a class that inherits all props and prototypes from a generic type in this way:

class CustomExtend<T> extends T {
    constructor(data: T) {
        // finding a workaround to distinguish these two classes
        const prototype = { ...CustomExtend.prototype };
        Object.assign(prototype, Object.getPrototypeOf(data));
        Object.setPrototypeOf(this, prototype);
        Object.assign(this, data);
    }

    CustomMethod() { }
}

From now on, I would be able to create an instance of the CustomExtend class and utilize the types of both classes like so:

const obj = new CustomExtend<Model>(data);
obj.CustomMethod(); // works fine
obj.ModelMethod(); // excellent!

One solution could be using intersection, similar to this:

const obj: CustomExtend & Model = new CustomExtend(data) as any;

Although this method worked, I feel there might be a better alternative. Any suggestions?

typescript

Answer 1

Answer №1

In TypeScript, it is not possible to implement or extend another type T unless all the keys of T are known at compile time. This limitation prevents the creation of a class like

GenericExtend<T> implements T {...}

.

To achieve similar behavior, you can use an intersection and confine the type assertion to the constructor function. Here's how you can refactor the code:

class _GenericExtend<T> {
  constructor(data: T) {
    const proto = { ..._GenericExtend.prototype };
    Object.assign(proto, Object.getPrototypeOf(data));
    Object.setPrototypeOf(this, proto);
    Object.assign(this, data);
  }
  GenericMethod() { }
}

Redefine GenericExtend as both a type and a constructor with the desired intersection behavior:

type GenericExtend<T> = _GenericExtend<T> & T;
const GenericExtend: new <T>(data: T) => GenericExtend<T> = _GenericExtend as any;

The final as any is necessary for type assertion. After making these changes, you should be able to achieve the behavior you desire:

interface Model {
  ModelMethod(): void;
}
declare const data: Model;

const obj = new GenericExtend(data);
obj.GenericMethod(); // works fine
obj.ModelMethod(); // also works fine

For further reference and testing, you can check out the code on the TypeScript playground by clicking here.

Answer 2

In TypeScript, it is not possible to implement or extend another type T unless all the keys of T are known at compile time. This limitation prevents the creation of a class like

GenericExtend<T> implements T {...}

.

To achieve similar behavior, you can use an intersection and confine the type assertion to the constructor function. Here's how you can refactor the code:

class _GenericExtend<T> {
  constructor(data: T) {
    const proto = { ..._GenericExtend.prototype };
    Object.assign(proto, Object.getPrototypeOf(data));
    Object.setPrototypeOf(this, proto);
    Object.assign(this, data);
  }
  GenericMethod() { }
}

Redefine GenericExtend as both a type and a constructor with the desired intersection behavior:

type GenericExtend<T> = _GenericExtend<T> & T;
const GenericExtend: new <T>(data: T) => GenericExtend<T> = _GenericExtend as any;

The final as any is necessary for type assertion. After making these changes, you should be able to achieve the behavior you desire:

interface Model {
  ModelMethod(): void;
}
declare const data: Model;

const obj = new GenericExtend(data);
obj.GenericMethod(); // works fine
obj.ModelMethod(); // also works fine

For further reference and testing, you can check out the code on the TypeScript playground by clicking here.

Answer 3

Answer №2

When facing a similar requirement, I found a way to make it work without the need for strict intersection (by creating a dedicated type for type checking). Here is how I achieved it:

class A {
  a() {
    ...
  }
}

class B {
  b() {
    ...
  }
}

type Constructor = new (...args: any[]) => any

function genericExtend<T extends Constructor>(target: T) {
  return class GenericExtended extends target {
    constructor(...args: any[]) {
      super(...args)
    }

    genericMethod() {
      ...
    }
  }
}

const instanceOfA: GenericExtended & A = new (genericExtend(A))()
const instanceOfB = new (genericExtend(B))()

instanceOfA.a() // ok with type checking
instanceOfA.genericMethod() // ok with type checking

instanceOfB.b() // ok without type checking
instanceOfB.genericMethod() // ok without type checking

Answer 4

When facing a similar requirement, I found a way to make it work without the need for strict intersection (by creating a dedicated type for type checking). Here is how I achieved it:

class A {
  a() {
    ...
  }
}

class B {
  b() {
    ...
  }
}

type Constructor = new (...args: any[]) => any

function genericExtend<T extends Constructor>(target: T) {
  return class GenericExtended extends target {
    constructor(...args: any[]) {
      super(...args)
    }

    genericMethod() {
      ...
    }
  }
}

const instanceOfA: GenericExtended & A = new (genericExtend(A))()
const instanceOfB = new (genericExtend(B))()

instanceOfA.a() // ok with type checking
instanceOfA.genericMethod() // ok with type checking

instanceOfB.b() // ok without type checking
instanceOfB.genericMethod() // ok without type checking

TypeScript: Extending a Generic Type with a Class

Answer №1

Answer №2

Similar questions

The feature of "compile on save" is not functioning properly in my current Angular project

Utilize Angular's Reactive Form feature to track changes in Form Control instances within a Form Array and calculate the total value dynamically

How can I display and link a base64 string to an Image as a source in Nativescript?

Implementing React custom component with conditional typing

Revise the observable to trigger a NgbModal from a service

Class for Eliminating the Background Image Using Bootstrap

Experiencing issues while trying to render a component with dynamic content in Next.js

Handling JSON Objects with Next.js and TypeScript

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

How can you indicate that a function in TypeScript is expected to throw an error?

An error was encountered in the rxjs-compat module at operator/shareReplay.d.ts line 2, character 10: TypeScript error TS2305

Lazy-loading modules in SSR Angular 8 applications are currently unspecified

Error: monaco has not been declared

What could be the reason for receiving an HttpErrorResponse when making a GET request that returns byte data

Trouble with querying NG elements using "queryAll(By.css)" in Angular and Jasmin unit testing

Is there a way to navigate to a specific component selector within an ngFor loop?

Combining the values of a particular key with duplicate objects into a single object within an array of JSON objects using Angular and Typescript

Experiencing the error message "delete(...).then(...).error is not a function" while attempting to remove a file from Firebase storage using AngularFire and TypeScript

There is an issue with the property 'updateModf' in the constructor as it does not have an initializer and is not definitely assigned

The Typescript SyntaxError occurs when attempting to use an import statement outside of a module, typically within a separate file that contains