What is the best way to duplicate a Typescript class object while making changes to specific properties?

Question

What is the best way to duplicate a Typescript class object while making changes to specific properties?

I have a Typescript cat class:

class Kitty {
  constructor(
    public name:  string,
    public age:   number,
    public color: string
  ) {}
}

const mittens = new Kitty('Mittens', 5, 'gray')

Now I want to create a clone of the instance, but update one property. If this were a plain object, it would be simple:

const whiskers = {...mittens, name: 'Whiskers'}

But that doesn't result in an instance of the Kitty class. To achieve that, I need to manually specify each property:

const Whiskers = new Kitty('Whiskers', mittens.age, mittens.color)

Is there a more efficient way to duplicate a class instance, rather than a plain object, while modifying specific properties?

javascript typescript functional-programming

Answer 1

Answer №1

A static factory method can be implemented to create a new instance based on the object provided

class Cat {
  constructor(...) {...}
  
  static fromObject({ name, age, color }) {
    return new Cat(name, age, color)
  }
}

To update the sophie object with a new name:

const tipper = Cat.fromObject({ ...sophie, name: "Tipper" })

class Cat {
  constructor(name, age, color) {
    this.name = name;
    this.age = age;
    this.color = color
  }
  
  static fromObject({ name, age, color }) {
    return new Cat(name, age, color)
  }
}

const sophie = new Cat('Sophie', 17, 'black')
const tipper = Cat.fromObject({ ...sophie, name: "Tipper" })

console.log(tipper)
console.log(tipper instanceof Cat)

Alternatively,

If you adjust the constructor signature, you can directly pass an object as an argument

class Cat {
  constructor({ name, age, color }) {
     ...
  }
}

new Cat({ ...sophie, name: "Tipper" })

class Cat {
  constructor({ name, age, color }) {
    this.name = name;
    this.age = age;
    this.color = color
  }
}

const sophie = new Cat({ name: "Sophie", age: 17, color: "black" })
const tipper = new Cat({ ...sophie, name: "Tipper" })

console.log(tipper)
console.log(tipper instanceof Cat)

Answer 2

A static factory method can be implemented to create a new instance based on the object provided

class Cat {
  constructor(...) {...}
  
  static fromObject({ name, age, color }) {
    return new Cat(name, age, color)
  }
}

To update the sophie object with a new name:

const tipper = Cat.fromObject({ ...sophie, name: "Tipper" })

class Cat {
  constructor(name, age, color) {
    this.name = name;
    this.age = age;
    this.color = color
  }
  
  static fromObject({ name, age, color }) {
    return new Cat(name, age, color)
  }
}

const sophie = new Cat('Sophie', 17, 'black')
const tipper = Cat.fromObject({ ...sophie, name: "Tipper" })

console.log(tipper)
console.log(tipper instanceof Cat)

Alternatively,

If you adjust the constructor signature, you can directly pass an object as an argument

class Cat {
  constructor({ name, age, color }) {
     ...
  }
}

new Cat({ ...sophie, name: "Tipper" })

class Cat {
  constructor({ name, age, color }) {
    this.name = name;
    this.age = age;
    this.color = color
  }
}

const sophie = new Cat({ name: "Sophie", age: 17, color: "black" })
const tipper = new Cat({ ...sophie, name: "Tipper" })

console.log(tipper)
console.log(tipper instanceof Cat)

What is the best way to duplicate a Typescript class object while making changes to specific properties?

Answer №1

Similar questions

Express Form Validation: Ensuring Data Accuracy

Vercel encountered issues with "validating code quality and type correctness" during deployment but was successful when performed locally

What type is the appropriate choice for this handler?

One efficient way to handle multiple concurrent tasks in NodeJs is by using the forEach method to iterate

The Problem of Unspecified Return Type in Vue 3 Functions Using Typescript

Utilizing Rxjs to transform an array of objects

Using React for passing data

Dealing with multipart/form-data in Express using cloud functions in the upcoming year of 2022

Tips for updating Okta token when there are changes to claims

After introducing 5 guard properties, the intersection of unions in Typescript breaks down

Mastering the implementation of type refinements for io-ts in processing input data

Tips for improving the performance of MongoDB queries in a Node.js environment

When using Javascript, the click function is returned as not being a valid function

Access to PHP script (IF) unattainable following a POST occurrence

When running the command "npx create-next-app@latest --ts," be aware that there are 3 high severity vulnerabilities present. One of the vulnerabilities is that "node-fetch

Activate a particular panel within the leftPanel using PDFNet Webviewer

The disappearance of the checkbox is not occurring when the text three is moved before the input tag

Responding to a tweet with the help of twit and Node.js

Issues with injection of angularjs, sockjs, and angular-sockjs are causing functionality to not

unable to choose just one material ui checkbox