Decorating a class with a decorator does not effectively seal the class

Question

Decorating a class with a decorator does not effectively seal the class

I'm attempting to apply a decorator to seal my class object, but it seems like it's not working. Even after initializing the class, I am able to delete a property or add another one to the class. Here is the code snippet:

function sealed(constructor: Function) {
  Object.seal(constructor);
  Object.seal(constructor.prototype);
}

@sealed
class BugReport {
  type = 'report';
  title: string;

  constructor(t: string) {
    this.title = t;
  }
}

const bug = new BugReport('but');

delete bug.title;
delete bug.type;

console.log(bug); // BugReport {}

However, when I tried sealing a pure object, everything worked as expected. Here is the code snippet for that:

const obj = {
  name: 'Jack',
};

Object.seal(obj);

delete obj.name;

console.log(obj); // will throw an error: Cannot delete property 'name'

This issue arises in the tsconfig.json file as well.

{
  "compilerOptions": {
    // `target` and `lib` match @tsconfig/bases for node12, since that's the oldest node LTS, so it's the oldest node we support
    "target": "es2019",
    "lib": ["es2019", "es2020.promise", "es2020.bigint", "es2020.string", "dom"],
    "rootDir": "src",
    "outDir": "dist",
    "module": "commonjs",
    "moduleResolution": "node",
    "strict": true,
    "declaration": true,
    "sourceMap": true,
    "inlineSources": true,
    "types": ["node"],
    "stripInternal": true,
    "incremental": true,
    "skipLibCheck": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strictPropertyInitialization": false
  },
  "ts-node": {
    "swc": true
  },
  "include": ["src/**/*"],
  "typedocOptions": {
    "entryPoints": ["./src/index.ts"],
    "readme": "none",
    "out": "website/static/api",
    "excludeTags": ["allof"],
    "categorizeByGroup": false,
    "categoryOrder": ["Basic", "REPL", "Transpiler", "ESM Loader", "Other"],
    "defaultCategory": "Other"
  }
}

Why is the decorator function unable to manipulate the class at all?

Appreciate any assistance provided.

typescript decorator

Answer 1

Answer №1

Object.seal is explained in detail on the MDN page:

The Object.seal() method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable.

You are sealing not only the class constructor itself but also its prototype.

If you try to add a property to the prototype like this:

BugReport.prototype.modified = 42;

An error will occur because the prototype has been sealed. Similarly, attempting to modify the constructor will also throw an error:

BugReport.modified = 42;

It's important to note that the properties on the class do not belong to the prototype either:

console.log(BugReport.prototype); // {}

To achieve the desired behavior, make sure to seal the instance in the class constructor:

constructor(t: string) {
    this.title = t;

    Object.seal(this); // seal THIS instance
}

Now, any attempt to modify the instance will result in errors.

Feel free to experiment with this concept in the playground.

Answer 2

Object.seal is explained in detail on the MDN page:

The Object.seal() method seals an object, preventing new properties from being added to it and marking all existing properties as non-configurable.

You are sealing not only the class constructor itself but also its prototype.

If you try to add a property to the prototype like this:

BugReport.prototype.modified = 42;

An error will occur because the prototype has been sealed. Similarly, attempting to modify the constructor will also throw an error:

BugReport.modified = 42;

It's important to note that the properties on the class do not belong to the prototype either:

console.log(BugReport.prototype); // {}

To achieve the desired behavior, make sure to seal the instance in the class constructor:

constructor(t: string) {
    this.title = t;

    Object.seal(this); // seal THIS instance
}

Now, any attempt to modify the instance will result in errors.

Feel free to experiment with this concept in the playground.

Decorating a class with a decorator does not effectively seal the class

Answer №1

Similar questions

Different ways to categorize elements of Timeline using typescript

Firing a function in Angular2 whenever an observable property undergoes a change

What is the method for retrieving properties from a generic in typescript?

Include a new module in the declarations NgModule utilizing ts-morph

Guide to defining font style in vanilla-extract/CSS

Unable to locate a declaration file for the 'mymodule' module

Error: XYZ has already been declared in a higher scope in Typescript setInterval

I am experiencing slow load times for my Angular 2 app when first-time users access it, and I am seeking assistance in optimizing its speed

I encountered a typescript error while trying to export my Class component within a Higher Order Component (HOC)

An error occurred due to attempting to access properties of null while trying to read 'useMemo' in a Next.js TypeScript application

The error message "Property '$store' is not defined on type 'ComponentPublicInstance' when using Vuex 4 with TypeScript" indicates that the property '$store' is not recognized

Can you explain the significance of syntax in sample code (typescript, react)?

Changing the global type in TypeScript

Conditional void parameter type in Typescript

What is the best way to define several mapped types in TypeScript?

How to retrieve a component's property within an Angular2 provider?

Angular2's ErrorHandler can cause code to malfunction when an error occurs

Angular Error Handler - Extracting component context information from errors

Unlock the Power of Angular: Leveraging ViewEncapsulation.Native to Access HTML Elements

The CosmosClient's read() method will only return an object if both the ID and partition key value are provided