Ways to prevent the modification of a getter object's value

Question

Ways to prevent the modification of a getter object's value

I am encountering an issue with my getter function, 'data', which returns an object. I am only able to retrieve the value since no setter has been implemented.

Despite not being able to set the value directly, I am still able to modify the data object. How can I prevent this from happening?

dataClass.ts

interface dataInterface {
  test1: string;
  data: object;
}

class dataModel {
  private _data: dataInterface;
  get data(): dataInterface {
    return this._data;
  }
}

externalClass.ts

class externalClass {
  testData = new dataModel()

  testing(){
    this.testData.data.test1 = "WW"; // I can set a value even though data is meant to be read-only
    this.testData.data = {test1:"WW",data:{} // This should throw an error as expected
  }
}

After reviewing the code above, could you please provide guidance on how to prevent the modification of a getter object's value?

Thank you

angular typescript

Answer 1

Answer №1

One issue arises when attempting to modify the value of a read-only getter. This does not alter the reference stored in data, but instead updates a field within the object, which is permissible.

To address this, the Readonly mapped type can be used to designate all fields of the returned object as read-only:

interface dataInterface {
  test1: string;
  data: object;
}

class dataModel {
  private _data: dataInterface;
  get data(): Readonly<dataInterface> {
    return this._data;
  }
}

class externalClass {
  testData = new dataModel()

  testing(){
    this.testData.data.test1 = "WW"; // error
  }
}

Note: When dealing with nested structures, Readonly only enforces read-only on the first level. In such cases, creating a DeepReadonly type, as recommended here, may be necessary.

Answer 2

One issue arises when attempting to modify the value of a read-only getter. This does not alter the reference stored in data, but instead updates a field within the object, which is permissible.

To address this, the Readonly mapped type can be used to designate all fields of the returned object as read-only:

interface dataInterface {
  test1: string;
  data: object;
}

class dataModel {
  private _data: dataInterface;
  get data(): Readonly<dataInterface> {
    return this._data;
  }
}

class externalClass {
  testData = new dataModel()

  testing(){
    this.testData.data.test1 = "WW"; // error
  }
}

Note: When dealing with nested structures, Readonly only enforces read-only on the first level. In such cases, creating a DeepReadonly type, as recommended here, may be necessary.

Ways to prevent the modification of a getter object's value

Answer №1

Similar questions

What is the method by which the Angular compiler handles instances of multiple template reference variables sharing the same name

Enhancing code completion with IntelliSense for customized styled components' themes

Discovering the root cause of an Angular binding failure

Configuring Jest for Typescript with Module Resolution

Improving Performance with Reusing Selectors in Ngxs

What strategies can I employ to optimize this code in RXJS and Angular?

Tips for Observing angular forkJoin for multiple responses during unit testing with Jasmine

Utilize an enum to serve as a blueprint for generating a fresh object?

Using Stack and Drawer Navigations Together in React Native Navigation(v6)

Initiating Angular APP_INITIALIZERThe Angular APP_INITIALIZER

Passing layout to a Vue component using the setup script

Challenge encountered with TypeScript integration in the controller

Encountering an undefined value in Angular outside of the subscription

There is no assigned value in scope for the shorthand property. You must either declare one or provide an initializer

Is it possible for an uninitialized field of a non-null literal string type to remain undefined even with strict null checks in

Issues with responsiveness and calculated attributes in Vue 3 using the Composition API

Is there a way to inform TypeScript that an object can only return properties from values found within an array?

Enhance your React Typescript High Order Component by incorporating additional properties and implementing them

Creating a Typescript version of the mongodb project aggregation functionality

Angular 11 is indicating that the type 'File | null' cannot be assigned to the type 'File'