The debate between using a Class and an Object Literal comes down to the immut

Question

The debate between using a Class and an Object Literal comes down to the immut

Is it possible to create read-only properties in object literals?

export const Page = {
  
    email: 'input[type=email]',
    password: 'input[type=password]',

    fillLoginCredentials() {
        cy.get(this.email).type('email');
        cy.get(this.password).type('password');
    }

Just to give you a heads up, this is a page object utilized for cypress testing. Although I know how to make these properties immutable using classes, I prefer the simplicity of object literals with static methods.

In general terms, are there any specific advantages to using classes instead?

typescript cypress

Answer 1

Answer №1

Utilize Object.freeze() function to secure the object literal during runtime

Check out this straightforward test to verify its effectiveness.

const Task = {
  taskName: 'Buy groceries',
  priority: 'High',
  completeTask() {
      console.log('Completing task: ' + this.taskName);
  }
}

Object.freeze(Task)

it('Properties of Task object cannot be modified', (done) => {
  try {

    Task.priority = 'Low'

  } catch (error) {

    expect(error.message).to.contain("Cannot assign to read only property 'priority'")

    done()          // ensuring execution inside the try/catch block
  }
})

Answer 2

Utilize Object.freeze() function to secure the object literal during runtime

Check out this straightforward test to verify its effectiveness.

const Task = {
  taskName: 'Buy groceries',
  priority: 'High',
  completeTask() {
      console.log('Completing task: ' + this.taskName);
  }
}

Object.freeze(Task)

it('Properties of Task object cannot be modified', (done) => {
  try {

    Task.priority = 'Low'

  } catch (error) {

    expect(error.message).to.contain("Cannot assign to read only property 'priority'")

    done()          // ensuring execution inside the try/catch block
  }
})

Answer 3

Answer №2

When looking at it through a TypeScript lens, simply incorporating a const assertion will suffice:

export const Page = {
    email: 'input[type=email]',
    password: 'input[type=password]',

    fillLoginCredentials() {
        console.log('Some function');
    }
} as const;

Page.email = ''; // Error
Page.password = ''; // Error
Page.fillLoginCredentials = () => {}; // Error

^{Playground link}

However, be aware that this does not prevent changes during runtime.

Answer 4

When looking at it through a TypeScript lens, simply incorporating a const assertion will suffice:

export const Page = {
    email: 'input[type=email]',
    password: 'input[type=password]',

    fillLoginCredentials() {
        console.log('Some function');
    }
} as const;

Page.email = ''; // Error
Page.password = ''; // Error
Page.fillLoginCredentials = () => {}; // Error

^{Playground link}

However, be aware that this does not prevent changes during runtime.

The debate between using a Class and an Object Literal comes down to the immut

Answer №1

Answer №2

Similar questions

What is preventing TypeScript from recognizing the key property as a component of the Event type?

TypeScript feature: Determining return type dynamically based on object property using string literal

Converting TypeScript into a single line of PHP code

Enhancing Angular 5 with CustomEvent Polyfill for JavaScript

Tips for defining the anticipated server response solely based on status and cookie

Ensuring that files adhere to the required format, whether they be images

What's wrong with the current longitude and latitude bounding box algorithm used for geolocation searches?

This object does not have support for the attribute or method "getAttribute"

What is the best method for retrieving database table content in NestJS?

Matching TypeScript search field names with column names

Is there a way to locate a prior version of the NPM @types package?

Is it possible to use both interfaces and string union types in TypeScript?

Ways of utilizing a dynamic key for invoking a resource from prisma

Steps for developing a versatile function Component

Converting TypeScript into JavaScript files within an ASP.NET SPA application

How can one correctly cast or convert an array of objects to the interface that extends the objects' parent interface in Typescript?

Encountering TS2304 error message while running TypeScript files indicates the inability to locate the name 'PropertyKey', in addition to another error - TS2339

Exploring techniques to retrieve data from Json Array in Angular using Firebase documentation

The v8 getHeapShot function is causing an infinite hang in jest

What are the downsides of utilizing a global function over a private static method in Typescript?