Exploring the World of Typescript Interfaces

Question

Exploring the World of Typescript Interfaces

I have an interface defined in my code that looks like this.

interface MyFlag {
   flag1: boolean,
   flag2: boolean
}

In my code, I initialize the interface like 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));

After running these lines of code, here are the logged results:

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

The confusion arises from the fact that the value of "dummy" appears to change when I modify myFlag.

My question is, "Is there a way to keep 'dummy' as its initial assigned value?" It seems likely that this behavior is related to the nature of interfaces.

Any assistance on this matter would be greatly appreciated.

Thank you and regards,

SD

typescript interface

Answer 1

Answer №1

I'm puzzled by the fact that "dummy" changes value when I modify myFlag.

dummy shouldn't change when a new object is assigned to myFlag, but it should change when the internal state of myFlag is altered.

Below is the JavaScript-transpiled version of your code. In this snippet, you assign a new object to myFlag, yet the value of dummy remains unaffected (which contradicts what you reported).

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're likely encountering the distinction between 1. altering the state of the object that a variable references and 2. modifying the value of the reference within a variable. Here's an example to illustrate:

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 in foo
// now, foo and bar refer to different objects 
foo = {
    value: "third"
};

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

// here, we are changing the internal state of the object referenced by bar
// this doesn't impact the object referenced by foo
bar.value = "fourth";
console.log(foo.value + " " + bar.value); // third fourth

Answer 2

I'm puzzled by the fact that "dummy" changes value when I modify myFlag.

dummy shouldn't change when a new object is assigned to myFlag, but it should change when the internal state of myFlag is altered.

Below is the JavaScript-transpiled version of your code. In this snippet, you assign a new object to myFlag, yet the value of dummy remains unaffected (which contradicts what you reported).

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're likely encountering the distinction between 1. altering the state of the object that a variable references and 2. modifying the value of the reference within a variable. Here's an example to illustrate:

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 in foo
// now, foo and bar refer to different objects 
foo = {
    value: "third"
};

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

// here, we are changing the internal state of the object referenced by bar
// this doesn't impact the object referenced by foo
bar.value = "fourth";
console.log(foo.value + " " + bar.value); // third fourth

Exploring the World of Typescript Interfaces

Answer №1

Similar questions

Tips for effectively utilizing the 'or' operator when working with disparate data types

I am struggling to understand the significance of the $ symbol in this particular context

Having trouble importing or resolving files with ts-loader or css-loader?

When an input event is dispatched in a unit test, the value changes of a form are not activated

Integrating a non-nullable static type into memoized components leads to a lint error - refer to the example provided for

Import Information into Popup Window

Fetching data from React Router v6 Navigate

What is the best way to execute 2 statements concurrently in Angular 7?

Ensuring that an object containing optional values meets the condition of having at least one property using Zod validation

Although everything appears to be running smoothly in Express, my request is returning null

In TypeScript, what is the return Type of sequelize.define()?

Executing a function to erase the stored value in local storage during an Angular unit test

I am unable to transmit information using the `http.post` function

What is the best way to pass an array as a parameter in Angular?

Selected structures in rust

Overlap with upper picture formatting

The utilization of a Typescript Generic for basic addition is not producing the desired results

Tips for reducing a discriminated union by using the key value of a Record

Error: TypeScript React Google Maps: The object 'google' is not recognized

What is the best way for me to examine [...more] closely?