Transform the Standard class into a generic one in typescript

Question

Transform the Standard class into a generic one in typescript

I've created a class that can take JSON objects and transform them into the desired class. Here's the code:


import {plainToClass} from "class-transformer";
import UserDto from "../../auth/dto/user.dto";

class JsonConverter {
    
    convertData(data) {
        return plainToClass(UserDto, data);
    }
}

However, when I try to make the class more generic,


import {plainToClass} from "class-transformer";
import UserDto from "../../auth/dto/user.dto";

class JsonConverter<T> {

    convertData(data) {
        return plainToClass(T, data);
    }
}

I encounter the following error:

T only refers to a type, but is being used as a value here

javascript typescript class class-transformer

Answer 1

Answer №1

Upon further examination of the code, I discovered that TypeScript generics have significant differences compared to C# or other programming languages. In order to achieve a more generic feel without altering the syntax, I made adjustments to the code as follows:


import {plainToClass} from "class-transformer";

interface IClass {
    new (...args : any[])
}

class ConvertJson {

    constructor(private dto : IClass) {
    }

    userData(data) {
        return plainToClass(this.dto, data);
    }
}

I opted for using IClass instead of any to ensure consistency among team members by enforcing the usage of classes over other types.

Answer 2

Upon further examination of the code, I discovered that TypeScript generics have significant differences compared to C# or other programming languages. In order to achieve a more generic feel without altering the syntax, I made adjustments to the code as follows:


import {plainToClass} from "class-transformer";

interface IClass {
    new (...args : any[])
}

class ConvertJson {

    constructor(private dto : IClass) {
    }

    userData(data) {
        return plainToClass(this.dto, data);
    }
}

I opted for using IClass instead of any to ensure consistency among team members by enforcing the usage of classes over other types.

Answer 3

Answer №2

Building upon the insights shared by Milad👇
class-transformer offers a set of generic classes to achieve similar functionalities as previously mentioned.

import { plainToClass, ClassConstructor } from "class-transformer";

class ConvertJson {
    userData<TargetClass>(data: unknown, dtoClass: ClassConstructor<TargetClass>) {
        return plainToClass(dtoClass, data);
    }
}

The version of class-transformer I am using is v0.5.1

✍Please take note:
plainToClasss has been deprecated❌
Instead, opt for plainToInstance (they are functionally equivalent)✅

Answer 4

Building upon the insights shared by Milad👇
class-transformer offers a set of generic classes to achieve similar functionalities as previously mentioned.

import { plainToClass, ClassConstructor } from "class-transformer";

class ConvertJson {
    userData<TargetClass>(data: unknown, dtoClass: ClassConstructor<TargetClass>) {
        return plainToClass(dtoClass, data);
    }
}

The version of class-transformer I am using is v0.5.1

✍Please take note:
plainToClasss has been deprecated❌
Instead, opt for plainToInstance (they are functionally equivalent)✅

Answer 5

Answer №3

It appears that the desired action is to convert the output based on the type of input.

class JsonConverter<T> {
    convertData(data) {
        return <T>parseToClass(data);
    }
}

Answer 6

It appears that the desired action is to convert the output based on the type of input.

class JsonConverter<T> {
    convertData(data) {
        return <T>parseToClass(data);
    }
}

Transform the Standard class into a generic one in typescript

Answer №1

Answer №2

Answer №3

Similar questions

Translate CSS into JavaScript while maintaining selector understanding

Manage the number of choices available on a drop-down selection form

Transmitting form information to a nested page within a div container

Encountering a Forbidden Error with Superagent

Problem: Repeated attempts to open the popup are unsuccessful

When an onClick event is triggered in jQuery, generate a certain number of div blocks based on the available list items, such as image source and heading text

Trouble With OnClick and On/Off Class Script Functionality in Chrome and Internet Explorer

JavaScript Mouseover Custom Trigger with d3.js Library

Exploring Angular2's ability to interpret directive templates using the ng-container

Utilize FormData by passing it to a separate function and then utilizing it

Exploring the advantages and disadvantages of using React class property initializers

What is the best way to incorporate a new attribute into an array of JSON objects in React by leveraging function components and referencing another array?

Which method is optimal for organizing tree categories and linking them to posts, as well as locating posts based on a selected category within a MERN stack

history.js - failure to save the first page in browsing history

Displaying JSON as a table using React JS

Heroku deployment failed: Push rejected due to lack of a Cedar-supported application

Execute an AJAX function to monitor a JSON response at intervals of 3 seconds

Are you unsure whether to use Ajax or jQuery? If you need assistance in adding parameters to

Transform the characters within a string into corresponding numerical values, calculate the total sum, and finally display both the sum and the original string

What is the best way to utilize Gulp and Browserify for my JavaScript application?