typescript - cloning object

Question

I have a super class that is the parent  Entity  for many subclass  Customer  Product  ProductCategory      I m looking to clone dynamically an object that contains different sub objects in Typescript    In example   a Customer that has different Product who has a ProductCategory  var cust Customer    new Customer      cust name    someName   cust products push new Product someId1    cust products push new Product someId2      In order to clone the whole tree of object I created a function in Entity   public clone   any       var cloneObj   new this constructor        for  var attribut in this            if typeof this attribut       object               cloneObj attribut    this clone              else              cloneObj attribut    this attribut                       return cloneObj      The new rises the following error when it is transpiled to javascript  error TS2351  Cannot use  new  with an expression whose type lacks a call or construct signature   Although the script works  I would like to get rid of the transpiled error

User · Answer

Here is a modern implementation that accounts for Set and Map too:

export function deepClone<T extends object>(value: T): T {
  if (typeof value !== 'object' || value === null) {
    return value;
  }

  if (value instanceof Set) {
    return new Set(Array.from(value, deepClone)) as T;
  }

  if (value instanceof Map) {
    return new Map(Array.from(value, ([k, v]) => [k, deepClone(v)])) as T;
  }

  if (value instanceof Date) {
    return new Date(value) as T;
  }

  if (value instanceof RegExp) {
    return new RegExp(value.source, value.flags) as T;
  }

  return Object.keys(value).reduce((acc, key) => {
    return Object.assign(acc, { [key]: deepClone(value[key]) });
  }, (Array.isArray(value) ? [] : {}) as T);
}

Trying it out:

deepClone({
  test1: { '1': 1, '2': {}, '3': [1, 2, 3] },
  test2: [1, 2, 3],
  test3: new Set([1, 2, [1, 2, 3]]),
  test4: new Map([['1', 1], ['2', 2], ['3', 3]])
});

test1:
  1: 1
  2: {}
  3: [1, 2, 3]

test2: Array(3)
  0: 1
  1: 2
  2: 3

test3: Set(3)
  0: 1
  1: 2
  2: [1, 2, 3]

test4: Map(3)
  0: {"1" => 1}
  1: {"2" => 2}
  2: {"3" => 3}

User · Answer

Supplementary for option 4 by  fenton  using angularJS it is rather simple to do a deep copy of either an object or array using the following code  var deepCopy   angular copy objectOrArrayToBeCopied  More documentation can be found here  https   docs angularjs org api ng function angular copy

User · Answer

Since TypeScript 3 7 is released  recursive type aliases are now supported and it allows us to define a type safe deepCopy   function      DeepCopy type can be easily extended by other types     like Set  amp  Map if the implementation supports them  type DeepCopy lt T gt        T extends undefined   null   boolean   string   number   T       T extends Function   Set lt any gt    Map lt any  any gt    unknown       T extends ReadonlyArray lt infer U gt    Array lt DeepCopy lt U gt  gt           K in keyof T   DeepCopy lt T K  gt      function deepCopy lt T gt  obj  T   DeepCopy lt T gt           implementation doesn t matter  just use the simplest     return JSON parse JSON stringify obj       interface User       name  string      achievements  readonly string        extras             city  string           type UncopiableUser   User  amp        delete       gt  void     declare const user  User  const userCopy  User   deepCopy user      no errors  declare const uncopiableUser  UncopiableUser  const uncopiableUserCopy  UncopiableUser   deepCopy uncopiableUser      compile time error    Playground

User · Answer

My take on it   Object assign      only copies properties and we lose the prototype and methods   Object create      is not copying properties for me and just creating a prototype   What worked for me is creating a prototype using Object create      and copying properties to it using Object assign        So for an object foo  make clone like this   Object assign Object create foo   foo

User · Answer

For a simple clone of the hole object s content  I simply stringify and parse the instance    let cloneObject   JSON parse JSON stringify objectToClone     Whereas I change data in objectToClone tree  there is no change in cloneObject  That was my requierement   Hope it help

User · Answer

Try this   let copy    JSON parse JSON stringify objectToCopy       It is a good solution until you are using very large objects or your object has unserializable properties   In order to preserve type safety you could use a copy function in the class you want to make copies from   getCopy    YourClassName      return  JSON parse JSON stringify this         or in a static way   static createCopy objectToCopy  YourClassName   YourClassName      return  JSON parse JSON stringify objectToCopy

User · Answer

You can also have something like this   class Entity       id  number       constructor id  number            this id   id             clone    this           return new  this constructor as typeof Entity  this id  as this           class Customer extends Entity       name  string       constructor id  number  name  string            super id           this name   name             clone    this           return new  this constructor as typeof Customer  this id  this name  as this            Just make sure that you override the clone method in all Entity subclasses otherwise you ll end up with partial clones   The return type of this will always match the type of the instance

User · Answer

TypeScript JavaScript has its own operator for shallow cloning  let shallowClone        original

User · Answer

Here is my mash-up  And here is a StackBlitz link to it  Its currently limited to only copying simple types and object types but could be modified easily I would think      let deepClone    lt T gt  source  T      k  string   any     gt          let results     k  string   any               for  let P in source            if  typeof source P       object               results P    deepClone source P              else             results P    source P                           return results

User · Answer

If you get this error   TypeError  this constructor      is not a function   This is the correct script   public clone    any       var cloneObj   new   lt any gt this constructor        line fixed     for  var attribut in this            if  typeof this attribut       object                 cloneObj attribut    this attribut  clone              else               cloneObj attribut    this attribut                       return cloneObj

User · Answer

Add  lodash clonedeep     4 5 0  to your package json  Then use like this   import   as   from  lodash         const copy     cloneDeep original

User · Answer

In typeScript I test with angular  and it s doing OK   deepCopy obj              var copy              Handle the 3 simple types  and null or undefined         if  null    obj     object     typeof obj  return obj              Handle Date         if  obj instanceof Date                copy   new Date                copy setTime obj getTime                 return copy                        Handle Array         if  obj instanceof Array                copy                   for  var i   0  len   obj length  i  lt  len  i                      copy i    this deepCopy obj i                              return copy                        Handle Object         if  obj instanceof Object                copy                   for  var attr in obj                    if  obj hasOwnProperty attr   copy attr    this deepCopy obj attr                              return copy                     throw new Error  Unable to copy obj  Its type isn t supported

User · Answer

How about good old jQuery   Here is deep clone   var clone     extend true      sourceObject

User · Answer

You could use destructuring assignment with spread syntax    var obj    id   1  name    product1    var clonedObject       obj

User · Answer

function instantiateEmptyObject obj  object   object       if  obj    null    return            const prototype   Object getPrototypeOf obj       if   prototype            return                return Object create prototype      function quickCopy src  object  dest  object   object       if  dest    null    return dest         return      src     dest       quickCopy src  instantiateEmptyObject new Customer

User · Answer

I took a stab at creating a generic copy clone service that retains types for nested objects   Would love feedback if i m doing something wrong  but it seems to work so far     import   Injectable   from   angular core     Injectable   export class CopyService      public deepCopy lt T gt  objectToClone  T   T          If it s a simple type or null  just return it      if  typeof objectToClone      string           typeof objectToClone      number           typeof objectToClone      undefined           typeof objectToClone      symbol           typeof objectToClone      function           typeof objectToClone      boolean           objectToClone     null               return objectToClone                Otherwise  check if it has a constructor we can use to properly instantiate it        let ctor   Object getPrototypeOf objectToClone  constructor      if  ctor          let clone   new ctor              Once we ve instantiated the correct type  assign the child properties with deep copies of the values       Object keys objectToClone  forEach key   gt            if  Array isArray objectToClone key              clone key    objectToClone key  map item   gt  this deepCopy item            else           clone key    this deepCopy objectToClone key                     if  JSON stringify objectToClone      JSON stringify clone           console warn  object cloned  but doesnt match exactly    nobject      JSON stringify objectToClone      nclone      JSON stringify clone             return our cloned object          return clone            else           not sure this will ever get hit  but figured I d have a catch call        console log  deep copy found something it didnt know      JSON stringify objectToClone          return objectToClone

User · Answer

If you already have the target object  so you don t want to create it anew  like if updating an array  you must copy the properties  If have done it this way   Object keys source  forEach  key    gt        copy key    source key       Praise is due   look at headline  version 2

User · Answer

It s easy to get a shallow copy with  Object Spread  introduced in TypeScript 2 1  this TypeScript  let copy        original     produces this JavaScript   var   assign    this  amp  amp  this   assign     Object assign    function t        for  var s  i   1  n   arguments length  i  lt  n  i              s   arguments i           for  var p in s  if  Object prototype hasOwnProperty call s  p               t p    s p             return t     var copy     assign     original     https   www typescriptlang org docs handbook release-notes typescript-2-1 html

User · Answer

For deep cloning an object that can contain another objects  arrays and so on i use   const clone    lt T gt  source  T   T   gt      if  source     null  return source    if  source instanceof Date  return new Date source getTime    as any    if  source instanceof Array  return source map  item  any    gt  clone lt any gt  item   as any    if  typeof source      object   amp  amp  source               const clonnedObj         source as    key  string   any      as    key  string   any       Object keys clonnedObj  forEach prop   gt          clonnedObj prop    clone lt any gt  clonnedObj prop               return clonnedObj as T        return source     Use   const obj    a   1 2   b   s   c       gt    return  h      d  null  e   a   x      const objClone   clone obj

User · Answer

Came across this problem myself and in the end wrote a small library cloneable-ts that provides an abstract class  which adds a clone method to any class extending it  The abstract class  borrows the Deep Copy Function described in the accepted answer by Fenton only replacing copy       with copy   Object create originalObj  to preserve the class of the original object  Here is an example of using the class   import  Cloneable  CloneableArgs  from  cloneable-ts       Interface that will be used as named arguments to initialize and clone an object interface PersonArgs       readonly name  string      readonly age  number        Cloneable abstract class initializes the object with super method and adds the clone method    CloneableArgs interface ensures that all properties defined in the argument interface are defined in class class Person extends Cloneable lt TestArgs gt   implements CloneableArgs lt PersonArgs gt        readonly name  string      readonly age  number       constructor args  TestArgs            super args            const a   new Person  name   Alice   age  28    const b   a clone  name   Bob    a name    Alice b name    Bob b age    28   Or you could just use the Cloneable clone helper method   import  Cloneable  from  cloneable-ts    interface Person       readonly name  string      readonly age  number     const a  Person    name   Alice   age  28   const b   Cloneable clone a   name   Bob    a name    Alice b name    Bob b age    28

User · Answer

1 Use spread operator  const obj1     param   value     const obj2        obj1      Spread operator takes all fields from obj1 and spread them over obj2  In the result you get new object with new reference and the same fields as original one    Remember that it is shallow copy  it means that if object is nested then its nested composite params will exists in the new object by the same reference   2 Object assign    const obj1   param   value     const obj2 any   Object assign     obj1     Object assign create real copy  but only own properties  so properties in prototype will not exist in copied object  It is also shallow copy     3 Object create    const obj1   param   value     const obj2 any   Object create obj1     Object create is not doing real cloning  it is creating object from prototype  So use it if the object should clone primary type properties  because primary type properties assignment is not done by reference   Pluses of Object create are that any functions declared in prototype will be available in our newly created object     Few things about shallow copy  Shallow copy puts into new object all fields of the old one  but it also means that if original object has composite type fields  object  arrays etc   then those fields are put in new object with the same references  Mutation such field in original object will be reflected in new object    It maybe looks like a pitfall  but really situation when the whole complex object needs to be copied is rare  Shallow copy will re-use most of memory which means that is very cheap in comparison to deep copy     Deep copy  Spread operator can be handy for deep copy   const obj1     param   value   complex    name   John    const obj2        obj1  complex      obj1 complex      Above code created deep copy of obj1  Composite field  complex  was also copied into obj2  Mutation field  complex  will not reflect the copy

User · Answer

I ended up doing   public clone    any     const result   new   lt any gt this constructor         some deserialization code I hade in place already         which deep copies all serialized properties of the      object graph      result deserialize this        you could use any of the usggestions in the other answers to      copy over all the desired fields   properties    return result      Because   var cloneObj   new   lt any gt this constructor       from  Fenton gave runtime errors   Typescript version  2 4 2

User · Answer

For serializable deep clone  with Type Information is   export function clone lt T gt  a  T   T     return JSON parse JSON stringify a

User · Answer

Solving The Specific Issue  You can use a type assertion to tell the compiler that you know better   public clone    any       var cloneObj   new  this constructor   as any       for  var attribut in this            if  typeof this attribut       object                 cloneObj attribut    this attribut  clone              else               cloneObj attribut    this attribut                       return cloneObj      Cloning  Bear in mind that sometimes it is better to write your own mapping - rather than being totally dynamic  However  there are a few  cloning  tricks you can use that give you difference effects   I will use the following code for all the subsequent examples   class Example     constructor public type  string            class Customer     constructor public name  string  public example  Example            greet         return  Hello     this name         var customer   new Customer  David   new Example  DavidType         Option 1  Spread  Properties  Yes Methods  No Deep Copy  No    var clone        customer     alert clone name         clone example type      David DavidType   alert clone greet        Not OK  clone name    Steve   clone example type    SteveType    alert customer name         customer example type      David SteveType     Option 2  Object assign  Properties  Yes Methods  No Deep Copy  No    var clone   Object assign     customer    alert clone name         clone example type      David DavidType alert clone greet        Not OK  although compiler won t spot it  clone name    Steve   clone example type    SteveType    alert customer name         customer example type      David SteveType     Option 3  Object create  Properties  Inherited Methods  Inherited Deep Copy  Shallow Inherited  deep changes affect both original and clone   var clone   Object create customer    alert clone name         clone example type      David DavidType alert clone greet        OK  customer name    Misha   customer example   new Example  MishaType        clone sees changes to original  alert clone name         clone example type      Misha MishaType  clone name    Steve   clone example type    SteveType       original sees changes to clone alert customer name         customer example type      Misha SteveType     Option 4  Deep Copy Function  Properties  Yes Methods  No Deep Copy  Yes    function deepCopy obj        var copy          Handle the 3 simple types  and null or undefined     if  null    obj     object     typeof obj  return obj          Handle Date     if  obj instanceof Date            copy   new Date            copy setTime obj getTime             return copy                Handle Array     if  obj instanceof Array            copy               for  var i   0  len   obj length  i  lt  len  i                  copy i    deepCopy obj i                      return copy                Handle Object     if  obj instanceof Object            copy               for  var attr in obj                if  obj hasOwnProperty attr   copy attr    deepCopy obj attr                      return copy             throw new Error  Unable to copy obj  Its type isn t supported        var clone   deepCopy customer  as Customer   alert clone name         clone example type      David DavidType    alert clone greet        Not OK - not really a customer  clone name    Steve   clone example type    SteveType    alert customer name         customer example type      David DavidType

[javascript] typescript - cloning object

Examples related to javascript

Examples related to typescript