Error occurred while creating a new instance of a generic object

I´m encountering a

TypeError: type is not a constructor
when attempting to convert API data into Frontend DTOs.

The transformation method is as follows:

transform<T>(entities: any[]) {
    const tableDtos = new Array<T>();
    for (const entity of entities) {
      const dto: T = this.factory.createEntity(entity);
      tableDtos.push(dto);
    }
    return tableDtos;
  }

My factory looks like this:

export class Factory {
  create<T>(type: (new () => T)): T {
    return new type();
  }
}

I found the solution here. What could I be missing?

DTO

import { Entity} from 'src/models/api/Entity';

export class EntityTableEntry {

  id: number;
  name: string;

  constructor(entity: Entity) {
    this.id = entity.ID;
    this.name = entity.Name;
  }
}

Entity

export interface Cost {
  ID: number;
  Name: string;
  Description: string;
  Value: number;
}

The reason behind wanting a generic method is to avoid rewriting the transform method for each API call, which can become messy!

Answer №1

Assuming that the entities variable contains the necessary data for creating objects, it cannot be invoked using new. Instead, you should provide the actual class you wish to instantiate (perhaps by assigning the data to a new instance):

class xx {
  factory: Factory = new Factory();
  transform<T>(type: (new () => T), entities: any[]) {
    const tableDtos = new Array<T>();
    for (const entity of entities) {
      const dto: T = this.factory.createEntity(type, entity);
      tableDtos.push(dto);
    }
    return tableDtos;
  }
}

class Factory {
  createEntity<T>(type: (new () => T), data: any): T {
    var r = new type();
    Object.assign(r, data) // suggesting a possible implementation 
    return r;
  }
}

class DataClass { a!: number }

var r = new xx().transform(DataClass, [{ a: 1 }]);
console.log(r);

Play

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I attempted to use ng add @angular/pwa, but encountered an error code that is baffling to me. Are there any steps I can take to resolve this issue?

npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While trying to find a solution: [email protected] npm ERR! Found: @angular/[email protected] npm ERR! in node_modules/@angular/common npm ERR! @angular/common@"^14.2.3" ...

How can you dynamically disable a radio option button using Angular rendering without relying on an ID?

Is there a way to disable the male radio button without using an id, and utilizing angular rendering2? It seems like it's not working for me. I need to make this change only in the form.ts file, without altering the HTML code. form.html <label& ...

Navigating through a JSON dictionary in Svelte: A step-by-step guide

When working with Svelte, the #each construct allows for easy iteration over array-like objects. But what if you have a JSON dictionary object instead? Is there a way in Svelte to iterate over this type of object in order to populate a dropdown menu? The ...

Exploring the depths of a TypeScript interface with unknown levels of complexity

My current challenge involves a recursive function that operates on an object with a generic interface. This function essentially traverses the object and creates a new one with a nearly identical interface, except for the leaf nodes which are transformed ...

Ways to update the UI dynamically in Angular without the need to refresh the entire page

On my page, I have multiple charts and I'm facing an issue where the chart UI does not update immediately when I try to make a delete call by clicking the delete button. I always have to refresh the browser to see the changes. I have provided the ful ...

How to Use TypeScript to Disable Href in Angular

I've encountered a challenge with disabling an href link using Angular and Typescript, and I'm unsure if my current approach is the right one. Is there a more optimal way to achieve something like this? I would like it to resemble the red circle ...

Exploring the relationship between Typescript, RxJS, Ajax, undefined values

This particular question stands out due to the fact that despite similar issues being previously addressed, none of the existing solutions have proven effective. The problem at hand is as follows: There's a Typescript class that initiates an RxJS.aja ...

TypeScript's type 'T' has the potential to be instantiated with any type, even if it is not directly related to 'number'

Let's say we have a function that takes a value (for example, number) and a callback function that maps that value to another value. The function simply applies the provided callback: function mapNumber<T>(value: number, mapfn: (value: number) = ...

Obtaining attribute data value upon selection change in Angular 4

Having trouble retrieving the value from data-somedata in my code... <select class="form-control input-sm" [(ngModel)]="o.id" formControlName="optionals" (change)="menuChange($event)"> <option *ngFor="let menu_optional of menu_optionals" value= ...

How to determine the presence of 'document' in Typecsript and NextJS

Incorporating NextJS means some server-side code rendering, which I can manage. However, I'm facing a challenge when trying to check for set cookies. I attempted: !!document && !!document.cookie as well as document !== undefined && ...

Typescript: Determining the return type of a function based on its input parameters

I've been working on a function that takes another function as a parameter. My goal is to return a generic interface based on the return type of the function passed in as a parameter. function doSomething <T>(values: Whatever[], getter: (whatev ...

Encountered error message: "Cannot assign argument of type '() => () => boolean' to parameter of type 'EffectCallback'"

I recently started working with TypeScript. I encountered an issue when attempting to utilize useEffect in TypeScript within a React context, Error: Argument of type '() => () => boolean' is not assignable to parameter of type 'Effec ...

Impact when returning a React.FC Component

Using React, I have encountered a challenge with my site: I have a function that generates a Card component displaying information about my store's products (#1). To display this on the screen, I map through the array returned by the backend and pass ...

Ways to sequentially execute API calls rather than concurrently

Update: Find the complete solution at the end of this answer. Consider the following code snippet: @Injectable() export class FileUploader { constructor(private http: Http) {} upload(url: string, file: File) { let fileReader: FileReader ...

Is it possible to pass a Styled Components Theme as Props to a Material UI element?

After spending 9 hours scouring the internet for a solution, I am at my wit's end as nothing seems to work. Currently, I am developing a React component using TypeScript. The issue lies with a simple use of the Material UI Accordion: const Accordion ...

What Mac OSX command can you use in Typescript to input the quote character for multiline text?

Just starting out with Angular 2 and working through the official tutorial at https://angular.io/docs/ts/latest/tutorial/toh-pt1.html. I've realized that to use multi-line template strings (string interpolation), I have to use the ` mark. Any tips fo ...

A guide on incorporating unique font weights into Material UI

Looking to customize the Material theme by incorporating my own font and adjusting the font weights/sizes for the Typography components. I am attempting to set 100/200/300/400/500/600/700 as options for each specific typography variant, but it seems that o ...

What is preventing TypeScript from automatically inferring the type of an argument in a generic function that utilizes `keyof`?

What causes the error in this code snippet? type MyType = { a: string, b: string } function cantInfer<In, Out>(fn: (i: In) => Out, i: In) { } function myFunction<K extends keyof MyType>(key: K): string { return ''; } ...

One-of-a-kind npm module for typescript

As part of my project, I am enhancing an existing library to make it compatible with TypeScript. To showcase this modification, I have condensed it into a succinct Minimal working example The specified requirements To ensure backward compatibility, the li ...

invoking a method within an express route to retrieve and utilize middleware functions

For my project, I am working on a custom function to handle API request validation. Here is how it looks: export function validateBody(schema: string): (req: ExpressRequest, res: ExpressResponse, next: ExpressNextFunction) => void { return function ...