user2976358 user2976358 - 2 months ago 27
TypeScript Question

Cloning a TypeScript Object

I have a typescript class

export class Restaurant {

constructor ( private id: string, private name: string ) {

}

public getId() : string {
return this.id;
}

public setId(_id : string) {
this.id = _id;
}

public getName () {
return this.name;
}

public setName ( _name:string ) {
this.name = _name;
}

}


I then have an instance of this class ( this is an example ):

restaurant:Restaurant = new Restaurant(1,"TestRest");


I then store this restaurant object in some sort of cache

cache.store( restaurant );


then later in my application I get the restaurant back

var restToEdit = cache.get( "1" );
restToEdit.setName( "NewName" );


But because of javascripts pass by reference on objects, the changes I make to restToEdit also get saved in the restaurant that is in the cache.

I basically want the restaurant in the cache to be a totally different instance to the restToEdit.

I have tried using jQuery.clone and extend, but it doesn't seem to work and I think this is because of it being a typescript object. Or will that not matter?

Any answers on how to clone this object would be appreciated

Thanks

Answer

.clone() only clones DOM elements. In order to clone JavaScript objects try jQuery.extend. Something like this

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

Typescript transpiles to JavaScript. So, JavaScript way will work fine.

Demo:

// Transpiled version of TypeScript
"use strict";
    var Restaurant = (function () {
        function Restaurant(id, name) {
            this.id = id;
            this.name = name;
        }
        Restaurant.prototype.getId = function () {
            return this.id;
        };
        Restaurant.prototype.setId = function (_id) {
            this.id = _id;
        };
        Restaurant.prototype.getName = function () {
            return this.name;
        };
        Restaurant.prototype.setName = function (_name) {
            this.name = _name;
        };
        return Restaurant;
    }());

// Test Snippet
var r1 = new Restaurant(1, "A");
var r2 = jQuery.extend(true, {}, r1);

r2.setName("B");

console.log(r1.name);
console.log(r2.name);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>