Requiring Subclasses to Maintain Immutability

Question

Requiring Subclasses to Maintain Immutability

I have created a base class that contains various properties:

class Component {
    readonly id: number
    readonly type: number
}

Now, I am looking to create some subclasses, such as:

class HealthComponent extends Component {
    max_health: number,
    current_health: number
}

etc.

My goal is for HealthComponent to exhibit the same behavior as an Immutable.Record:

const health = HealthComponent(100, 100);
health.max_health = 40; // This should not work
const new_health = new HealthComponent(40, health.current_health); // This works

All of these classes are strictly data-oriented with no behavioral methods. To ensure immutability, I want to prevent modifications and instead return a new object or throw an error similar to how it's done in Immutable.js. However, I am struggling to find the best approach to achieve this.

The approach I'm currently considering involves giving each subclass a readonly data property that is an Immutable.Record containing the relevant fields. Yet, even this solution falls short since modifying it would only result in a new data object rather than an entirely new Component object. Moreover, this method does not guarantee consistency across all subclasses.

Another option under consideration is making the base class an Immutable.Record with a data: Immutable.Map field, while requiring subclasses to provide an Immutable.Map to the super constructor with all necessary keys. Unfortunately, this setup leaves room for unrestricted addition of new keys.

Are there any design patterns available that could assist me in achieving my intended functionality?

javascript oop typescript design-patterns immutable.js

Answer 1

Answer №1

Utilize the Readonly feature with a mapped type.

class Item {
    constructor(public itemId: number, public itemType: number) {

    }
}

class BookItem extends Item {
    constructor(public itemId: number, public itemType: number, public pageCount: number, public currentChapter: number) {
        super(itemId, itemType);
     }
}

let book: Readonly<BookItem> = new BookItem(1, 2, 300, 10);
book.pageCount = 400; // Results in an error

If there is no specific behavior required, consider incorporating an interface.

interface Item {
    itemId: number;
    itemType: number;
}

interface BookItem extends Item {
    pageCount: number;
    currentChapter: number;
}

let book: Readonly<BookItem> = {
    itemId: 1,
    itemType: 2,
    pageCount: 300,
    currentChapter: 10
};

book.pageCount = 400; // Generates an error

Answer 2

Utilize the Readonly feature with a mapped type.

class Item {
    constructor(public itemId: number, public itemType: number) {

    }
}

class BookItem extends Item {
    constructor(public itemId: number, public itemType: number, public pageCount: number, public currentChapter: number) {
        super(itemId, itemType);
     }
}

let book: Readonly<BookItem> = new BookItem(1, 2, 300, 10);
book.pageCount = 400; // Results in an error

If there is no specific behavior required, consider incorporating an interface.

interface Item {
    itemId: number;
    itemType: number;
}

interface BookItem extends Item {
    pageCount: number;
    currentChapter: number;
}

let book: Readonly<BookItem> = {
    itemId: 1,
    itemType: 2,
    pageCount: 300,
    currentChapter: 10
};

book.pageCount = 400; // Generates an error

Requiring Subclasses to Maintain Immutability

Answer №1

Similar questions

Using Angular JS to retrieve specific information from a JSON file

What is the proper way for the curry function to function effectively?

Using a render target causes certain elements of my visual graphics to become hidden

How can I establish default values for 2 to 3 options in a Dropdownlist?

The object literal is restricted to defining existing properties, and 'id' is not a recognized property in the type 'FindOptionsWhere<Teacher>'

Incrementally including DIV elements...one by one...2, 4, 6, 8, 10, 12

Show angular variable data in a table based on their index

What is the best way to access individual items within an *ngFor loop in Angular?

How to upload a document to Alfresco using JavaScript API

Accessing a Global Variable within a Node Express Class Module

Trouble with triggering events from Datatable buttons

Stunning Opening and Closing Animation with Ajax

How can you correctly make an Ajax request using computed properties sourced from VueX Store?

Angular Pagination: Present a collection of pages formatted to the size of A4 paper

Transferring a JSON-encoded string in "windows-1251" format from Python to JavaScript

stop all HTML5 videos when a specific video is played using jQuery

Animating the Three.js Globe camera when a button is clicked

Maximizing the efficiency of threejs through combining and selecting items

Autodesk Forge serves as a hub for hosting dependencies on a nearby server

What is the best way to retrieve upload progress information with $_FILES?