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

Transforming functions into a new typed object with different function signatures

Send a function as a parameter to another component, but it remains dormant

Using AngularJS to refresh information stored in an array

Ways to remove a

The error message "ECONNRESET" occurred while attempting to send a post request using Axios to

I'm curious about the significance of this in Angular. Can you clarify what type of data this is referring

Strange appearance of Material UI input field

What is the best way to utilize multiple models under a single root in ReactJS?

Prevent assigning values to rxjs observables recursively

Using Angular to Make a Request for a Twitter API Access Token

Having trouble installing sqlite3? Encounter an issue like this: "srcdatabase.cc(35): error C2248: 'Napi::Env::DefaultFini': cannot access private member declared in class 'Napi::Env'"?

An AJAX script for dynamically adding, modifying, and removing records from a database

Tips for successfully transferring data using a dynamic key in a Semantic UI Vue dropdown

Tips for maintaining knowledge after redirecting to a new page

Guide to making a language selection wrapper using a gist script

Discovering the smallest and largest values in an object literal using JavaScript

Is JavaScript still running despite not displaying insecure items due to IE 8 security warning?

Having trouble integrating MaterialUI Datepicker, Dayjs, useFormik, and Yup

Surprising block of text suddenly popped up on the browser screen while I was in the middle of working on

Clear the modal form in Codeigniter and AJAX upon closing the edit modal