creating a duplicate of a class instance in TypeScript

Question

creating a duplicate of a class instance in TypeScript

Struggling to replicate an instance in typescript.

Tried using jQuery.extend(true, {}, instance) but methods are not copied

Any assistance on this issue would be highly appreciated

typescript

Answer 1

Answer №1

To achieve a generic clone function, it is necessary for your classes to possess a default constructor:

function duplicate<T>(instance: T): T {
    const copy = new (instance.constructor as { new (): T })();
    Object.assign(copy, instance);
    return copy;
}

For instance:

class A {
    private _num: number;
    private _str: string;

    get num() {
        return this._num;
    }

    set num(value: number) {
        this._num = value;
    }

    get str() {
        return this._str;
    }

    set str(value: string) {
        this._str = value;
    }
}

let a = new A();
a.num = 3;
a.str = "string";

let b = duplicate(a);
console.log(b.num); // 3
console.log(b.str); // "string"

(view code in playground)

If your classes are more intricate (contain other class instances as members and/or lack a default constructor), then implement a duplicate method within your classes that can handle construction and assignment of values.

Answer 2

To achieve a generic clone function, it is necessary for your classes to possess a default constructor:

function duplicate<T>(instance: T): T {
    const copy = new (instance.constructor as { new (): T })();
    Object.assign(copy, instance);
    return copy;
}

For instance:

class A {
    private _num: number;
    private _str: string;

    get num() {
        return this._num;
    }

    set num(value: number) {
        this._num = value;
    }

    get str() {
        return this._str;
    }

    set str(value: string) {
        this._str = value;
    }
}

let a = new A();
a.num = 3;
a.str = "string";

let b = duplicate(a);
console.log(b.num); // 3
console.log(b.str); // "string"

(view code in playground)

If your classes are more intricate (contain other class instances as members and/or lack a default constructor), then implement a duplicate method within your classes that can handle construction and assignment of values.

Answer 3

Answer №2

After reading @Nitzan Tomer's answer, I developed the following code to automatically replicate nested properties if they are deemed Cloneable. Nevertheless, I am uncertain of the extent to which this approach is effective and what limitations it may have;

import { isUndefined } from "lodash";

export abstract class Cloneable<T> {
  clone(newPropertyValues: Partial<T> = {}): T {
    const clone = new (this.constructor as { new (): T })();

    const nestedClones = Object.getOwnPropertyNames(clone)
      .reduce((partial, propertyName) => {
        const property = Object.getOwnPropertyDescriptor(clone, propertyName) 
        const isCloneable = property?.value instanceof Cloneable
        const isNotProvided = isUndefined(
          Object.getOwnPropertyDescriptor(newPropertyValues, propertyName)
        )
        
        if(isCloneable && isNotProvided) {
          partial[propertyName as keyof T] = property?.value.clone()
        }

        return partial
      }, {} as Partial<T>)

    return Object.assign(clone, this, nestedClones, newPropertyValues);
  }

  cloneWith(newPropertyValues: Partial<T>): T {
    return this.clone(newPropertyValues)
  } 
}

To utilize this functionality, simply inherit from Cloneable<T> and make use of the clone method along with a typed cloneWith* for overriding specific values.

*The inclusion of cloneWith is primarily for improved semantics

Answer 4

After reading @Nitzan Tomer's answer, I developed the following code to automatically replicate nested properties if they are deemed Cloneable. Nevertheless, I am uncertain of the extent to which this approach is effective and what limitations it may have;

import { isUndefined } from "lodash";

export abstract class Cloneable<T> {
  clone(newPropertyValues: Partial<T> = {}): T {
    const clone = new (this.constructor as { new (): T })();

    const nestedClones = Object.getOwnPropertyNames(clone)
      .reduce((partial, propertyName) => {
        const property = Object.getOwnPropertyDescriptor(clone, propertyName) 
        const isCloneable = property?.value instanceof Cloneable
        const isNotProvided = isUndefined(
          Object.getOwnPropertyDescriptor(newPropertyValues, propertyName)
        )
        
        if(isCloneable && isNotProvided) {
          partial[propertyName as keyof T] = property?.value.clone()
        }

        return partial
      }, {} as Partial<T>)

    return Object.assign(clone, this, nestedClones, newPropertyValues);
  }

  cloneWith(newPropertyValues: Partial<T>): T {
    return this.clone(newPropertyValues)
  } 
}

To utilize this functionality, simply inherit from Cloneable<T> and make use of the clone method along with a typed cloneWith* for overriding specific values.

*The inclusion of cloneWith is primarily for improved semantics

creating a duplicate of a class instance in TypeScript

Answer №1

Answer №2

Similar questions

What is the best way to integrate AWS-Amplify Auth into componentized functions?

Fill a dynamic form with a date sourced from the ngrx storage

Comparing the cost of memory and performance between using classes and interfaces

Utilizing async/await to pass a variable instead of subscribing to it

Can the data cells of columns be dynamically adjusted to align them on a single vertical line?

Initiating Angular APP_INITIALIZERThe Angular APP_INITIALIZER

Tips for preventing repetition in http subscribe blocks across various components

Guide on importing and using types from an external library in my declaration file

How should dynamic route pages be properly managed in NextJS?

Changing JSON into an array with typescript

Remove the main project from the list of projects to be linted in

Disabling dynamic color updates upon refresh

The address :::3000 is already in use by NestJS

How to dynamically insert variables into a separate HTML file while creating a VS Code extension

TypeScript in conjunction with Eslint is throwing an error stating it is unable to locate a particular

Angular 2 module that is loaded lazily - service does not follow singleton pattern

What could be the reason for TypeScript throwing an error that 'product' does not exist in type '{...}' even though 'product' is present?

In Typescript, the error message "Property 'content' is not found on the type 'HTMLElement'" indicates that the 'content' property is not

Optimizing and scaling Firebase for improved performance

What is the most efficient way to iterate through an array to push properties into an object nested within another array?