Tips for setting up a proxy with an enum

Question

Tips for setting up a proxy with an enum

I am facing an issue with setting up a Proxy for an enum. Specifically, I have an enum where I want to assign a value to this.status using a Proxy. However, despite my expectations, the output "I have been set" does not appear in the console. Can anyone explain why this proxy behavior is not working on an enum?

export enum Status { Beginning, Middle, Ending }

export class MyClass {
  public status = new Proxy(Status, {
    set: (target, propertyKey, value) = {
      console.log('I have been set')
      return Reflect.set(target, propertyKey, value)
    },
    get: (target, propertyKey) => Reflect.get(target, propertyKey)
  })
}

Here's how I'm trying to use it:

let c = new MyClass
c.status = Status.Middle

However, attempting to set it results in the error message:

Type 'Status.Middle' is not assignable to type 'typeof Status'.

javascript typescript enums

Answer 1

Answer №1

It seems like what you may actually need are accessors for the status property of MyClass, rather than a Proxy. Here's an example:

export enum Status { Beginning, Middle, Ending }

export class MyClass {
  private target: Status = Status.Beginning;

  public get status(): Status {
    return this.target;
  }
  public set status(status: Status) {
    console.log("I have been set");
    this.target = status;
  }
}

let c = new MyClass();
c.status = Status.Middle;
// logs "I have been set".

The main issue here is that if you want to intercept gets and sets on the status property of a MyClass instance, you should implement the behavior on MyClass itself, not on the Status enum. Also, using a full Proxy may be unnecessary if you only intend to wrap actions when working with a single property.

I hope this clarifies things for you. Best of luck!

If you find that using 'private' is not sufficient for your needs, you can try this alternative approach:

export class MyClass {
  status!: Status; // status will be defined in the constructor

  constructor() {
    let target = Status.Beginning;
    Object.defineProperty(this, 'status', {
      get() { return target; },
      set(status: Status) {
        console.log("I have been set");
        target = status;
      }
    })
  }
}

let c = new MyClass();
c.status = Status.Middle;
// logs "I have been set".

This method encapsulates the underlying target variable within a closure, making it completely inaccessible from outside the class. However, keep in mind that this creates a unique accessor for each instance of MyClass instead of utilizing a shared one on the prototype. Consider which approach suits your requirements best.

Good luck once more!

Answer 2

It seems like what you may actually need are accessors for the status property of MyClass, rather than a Proxy. Here's an example:

export enum Status { Beginning, Middle, Ending }

export class MyClass {
  private target: Status = Status.Beginning;

  public get status(): Status {
    return this.target;
  }
  public set status(status: Status) {
    console.log("I have been set");
    this.target = status;
  }
}

let c = new MyClass();
c.status = Status.Middle;
// logs "I have been set".

The main issue here is that if you want to intercept gets and sets on the status property of a MyClass instance, you should implement the behavior on MyClass itself, not on the Status enum. Also, using a full Proxy may be unnecessary if you only intend to wrap actions when working with a single property.

I hope this clarifies things for you. Best of luck!

If you find that using 'private' is not sufficient for your needs, you can try this alternative approach:

export class MyClass {
  status!: Status; // status will be defined in the constructor

  constructor() {
    let target = Status.Beginning;
    Object.defineProperty(this, 'status', {
      get() { return target; },
      set(status: Status) {
        console.log("I have been set");
        target = status;
      }
    })
  }
}

let c = new MyClass();
c.status = Status.Middle;
// logs "I have been set".

This method encapsulates the underlying target variable within a closure, making it completely inaccessible from outside the class. However, keep in mind that this creates a unique accessor for each instance of MyClass instead of utilizing a shared one on the prototype. Consider which approach suits your requirements best.

Good luck once more!

Tips for setting up a proxy with an enum

Answer №1

Similar questions

How come code suggestion works flawlessly on Stackblitz, yet fails to function in Intellij?

Tips for retrieving page source with selenium Remote Control

Setting up a Firebase app across multiple files using Node.js

What is the best way to allow someone to chain callback methods on my custom jQuery plugin?

Using import statement is mandatory when loading ES Module in TS Node: server/src/index.ts

Does anyone know if it's feasible to return a value from PHP to an HTML form without relying on JavaScript?

Exploring the power of makeStyles in Material UI when combined with TypeScript

What is the best way to redirect before displaying a page in Next.js?

Explain the object type that is returned when a function accepts either an array of object keys or an object filled with string values

The app.html for the skygear/react-chat-demo is malfunctioning

Enhanced form validation using AJAX

Notify when the focus is solely on the text box

Exploring the capabilities of zooming on SVG elements using D3 within an Angular

Navigating Through Angular Components

Uh oh! You haven't set a QueryClient yet. Make sure to use QueryClientProvider to set

Is there a way to modify the log() function to handle multiple arguments?

Swap out The div element with the html() method

How can you integrate jquery ajax in WordPress?

Setting up an i18n project in AngularJS

Encountering a Typescript issue stating "Property 'then' does not exist" while attempting to chain promises using promise-middleware and thunk