Typescript Interface Assignment

Question

In my code. I have an interface like this.

interface MyFlag {
   flag1: boolean,
   flag2: boolean
}

in my code I do this.

let myFlag: MyFlag = {"flag1":true, "flag2": true};
let dummy = myFlag;
console.log("dummy: " + JSON.stringify(dummy));
myFlag = {"flag1": false, "flag2": false};
console.log("dummy2 : " + JSON.stringify(dummy));

Here are my log results:

dummy: {"flag1":true, "flag2": true};
dummy2 : {"flag1":false, "flag2": false};

What I can't understand is that how come "dummy" is changing the value when I change myFlag.

My question is "Is there a way to make 'dummy' stay as the previously assigned value. My guess is that it is because of it being a interface.

Help is appreciated.

Cheers and Regards,

SD

`dummy` is just another reference pointing to the same object as `myFlag`. It has nothing to do with interfaces. — PM 77-1, Aug 02 '17 at 23:03
When you assign dummy = myFlag they are both referencing the same object. So you have one object with two reference variables for the same object. You need to make a copy of myFlag — Jason White, Aug 02 '17 at 23:05
here is a post on cloning objects in typescript https://stackoverflow.com/questions/28150967/typescript-cloning-object — Jason White, Aug 02 '17 at 23:12

Shaun Luttin · Answer 1 · 2017-08-03T00:22:33.177

What I cant understand is that how come "dummy" is changing value when I change myFlag.

dummy should not be changing when you assign a new object to myFlag, but it should be changing when you change the internal state of myFlag.

Here is the code that you posted but transpiled to JavaScript. In the code, you are assigning a new object to myFlag, and the value of dummy is not changing. (That differs from the behavior you reported in your answer.)

var myFlag = {
    "flag1": true,
    "flag2": true
};

var dummy = myFlag;
console.log("dummy: " + JSON.stringify(dummy));

myFlag = { "flag1": false, "flag2": false };
console.log("dummy2 : " + JSON.stringify(dummy));

// dummy: {"flag1":true,"flag2":true}
// dummy2 : {"flag1":true,"flag2":true}

You are probably experiencing the difference between 1. changing the state of the object to which a variable refers and 2. changing the value of the reference that a variable contains. Here is an illustrative example:

let foo = {
    value: "first"
};

// at this point, foo and bar hold references to the same object
let bar = foo;

console.log(foo.value + " " + bar.value); // first first

// here, we are changing the internal state of that object
// both variables change
foo.value = "second";
console.log(foo.value + " " + bar.value); // second second

// here, we are changing the value of the reference that foo contians
// at this point, foo and bar hold references to different objects 
foo = {
    value: "third"
};

console.log(foo.value + " " + bar.value); // third second

// here, we are changing the internal state of bar's object
// which has no impact on the internal state of foo's object
bar.value = "fourth";
console.log(foo.value + " " + bar.value); // third fourth

Typescript Interface Assignment

1 Answers1