Decorator used in identifying the superclass in Typescript

Question

Decorator used in identifying the superclass in Typescript

I am working with an abstract class that looks like this

export abstract class Foo {
  public f1() {
  }
}

and I have two classes that extend the base class

export class Boo extends Foo {
}

export class Moo extends Foo {
}

Recently, I created a custom decorator as shown below

export function Bla() {
  return (target: any, key: string, descriptor: PropertyDescriptor) => {
  }
}

Incorporating the decorator into my initial class now looks like this

export abstract class Foo {
 @Bla
 public f1() {
 }
}

I'm trying to figure out if there is a way in the decorator to distinguish where each call originated from, whether it was from Boo or Moo.

So far, I've attempted to check prototypes and constructors of target, but I haven't been able to determine the source class. Is there a method to achieve this or am I approaching it incorrectly?

Any help would be greatly appreciated.

typescript superclass typescript-decorator

Answer 1

Answer №1

If you want to access the method call itself, one way to do it is by inspecting the class instance:

function CustomFunction(target: any, propKey: string | symbol | d: PropertyDescriptor) {
  let originalMethod = target[propKey];

  // create a new property descriptor for the method, replacing the original one
  return {
    value: function () {
      let instance = this; 
      let classReference = instance.constructor; 

      if (classReference === CustomClass) {
        // perform actions specific to CustomClass
      }

      // call the original method
      return originalMethod.apply(this, arguments);
    }
  }
}

Answer 2

If you want to access the method call itself, one way to do it is by inspecting the class instance:

function CustomFunction(target: any, propKey: string | symbol | d: PropertyDescriptor) {
  let originalMethod = target[propKey];

  // create a new property descriptor for the method, replacing the original one
  return {
    value: function () {
      let instance = this; 
      let classReference = instance.constructor; 

      if (classReference === CustomClass) {
        // perform actions specific to CustomClass
      }

      // call the original method
      return originalMethod.apply(this, arguments);
    }
  }
}

Answer 3

Answer №2

When you apply a decorator to a prototype method, it gets executed when the class containing the decorator is evaluated, not at a later stage when instances are created. The decoration is only applied to the prototype member of that particular class, and subclasses inherit the decorated member.

Consider the following example:

function Bla() {
  return (target: any, key: string, descriptor: PropertyDescriptor) => {
    console.log(target.constructor.name);
  }
}

abstract class Foo {
  @Bla()
  public f1() {
  }
}

// At this point, "Foo" will be displayed in the console

class Boo extends Foo {
}

class Moo extends Foo {
}

The decorator function will execute during the evaluation of class Foo, not when instances are created later on. You can observe this behavior by visiting the playground. If the following code comes after the class definitions mentioned above:

setTimeout(() => {
    new Boo; // No output in the console
    setTimeout(() => {
        new Moo; // No output in the console
        console.log("Done");
    }, 1000);
}, 1000);

If you were decorating an instance member, you could identify the instance as either a Boo or Moo, but distinguishing between them becomes challenging when decorating a prototype member.

Answer 4

When you apply a decorator to a prototype method, it gets executed when the class containing the decorator is evaluated, not at a later stage when instances are created. The decoration is only applied to the prototype member of that particular class, and subclasses inherit the decorated member.

Consider the following example:

function Bla() {
  return (target: any, key: string, descriptor: PropertyDescriptor) => {
    console.log(target.constructor.name);
  }
}

abstract class Foo {
  @Bla()
  public f1() {
  }
}

// At this point, "Foo" will be displayed in the console

class Boo extends Foo {
}

class Moo extends Foo {
}

The decorator function will execute during the evaluation of class Foo, not when instances are created later on. You can observe this behavior by visiting the playground. If the following code comes after the class definitions mentioned above:

setTimeout(() => {
    new Boo; // No output in the console
    setTimeout(() => {
        new Moo; // No output in the console
        console.log("Done");
    }, 1000);
}, 1000);

If you were decorating an instance member, you could identify the instance as either a Boo or Moo, but distinguishing between them becomes challenging when decorating a prototype member.

Decorator used in identifying the superclass in Typescript

Answer №1

Answer №2

Similar questions

Guide to verifying the upcoming behavior subject data in Angular 8

TypeScript - create an Interface that must have either the error field or the payload field, but

Angular 9: Implementing a synchronous *ngFor loop within the HTML page

Utilize variable as both a function and an instance of a class

Issue with IntelliJ: TypeScript Reference Paths Are Not Relative

Are union types strictly enforced?

The propagation of onClick events in elements that overlap

The server's response is unpredictable, causing Json.Parse to fail intermittently

Issue in Angular: Attempting to access properties of undefined (specifically 'CustomHeaderComponent')

How can I access keys and values from an Observable within an Angular template?

Removing a field from a collection using firebase-admin: Tips and tricks

What causes an ObjectUnsubscribedError to be triggered when removing and then re-adding a child component in Angular?

Best practices for implementing the map function with TypeScript

Angular sets the required property only when the button is clicked

Display <video> component using Angular 2

How can I effectively address process.on test in TypeScript Mocha Testing with the help of a Sinon Spy?

Obtaining JSON data in React Native without prior knowledge of the key

Can the WebSocket interface be substituted with WebSocket itself?

What is the best way to retrieve every single element stored in an Object?

What is the reason that property spreading is effective within Grid components but not in FormControl components?