How to clone an object in TypeScript?

Question

I'm trying to pass a modified clone of an object credential.user to a function

const credential = await this.afAuth.auth.signInWithEmailAndPassword(email,password);
var userInfo=  await credential.user

userInfo.displayName=  name

return this.updateUserData(userInfo);

however I am getting this message:

ERROR Error: Uncaught (in promise): TypeError: "displayName" is read-only
emailLogin/<@http://localhost:4200

How can I clone this object received from an async function and modify one of its attributes?

score 0 · Answer 1 · answered Jan 25 '21 at 02:18

One way would be to use the spread operator to copy all properties but then overwrite the displayName with your desired value:

const credential = await this.afAuth.auth.signInWithEmailAndPassword(email,password);
var userInfo = await credential.user;

return this.updateUserData({
  ...userInfo,
  displayName: name
});

score 0 · Answer 2 · answered Jan 25 '21 at 03:15

I had to do deal with a similar issue the other day and even creating a new object and using the spread operator to copy didn't get around this issue.

What did work was:

const userCopy = JSON.parse(JSON.stringify(userInfo))

This creates a copy that is completely disassociated from the original.

How to clone an object in TypeScript?

2 Answers2