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

The React Hook Form's useFieldArray feature is causing conflicts with my custom id assignments

Utilizing Typescript to extract type information from both keys and values of an object

Updating data in Angular reactive forms using asynchronous dropdowns

Here's a revised version: "How to link a lambda layer with a function in a serverless.ts file using the

Error: The file named '/accounts.ts' cannot be recognized as a module within a Node.js API

A comprehensive guide on displaying data in Angular using an API

declaration of function interface and property that cannot be modified

Minimize the amount of information retrieved and shown based on the timestamp

Trouble with Nested Routing in React Router Version 6: Route not Rendering

Enhancing User Authentication: Vue 3 with TypeScript Login

The element at index '0' is not defined for the data type 'number | [number, number]'

Resolve an "Uncaught ReferenceError" by importing an unused component to fix the error of not being able to access a variable before initialization

I am having trouble getting my custom colors to work with hover effects in Tailwind CSS

Arranging a list of objects with a designated starting value to remain at the forefront

Unable to access 'export default class extends Vue' in the template

The object literal is limited to defining recognized properties, and 'clientId' is not present in the 'RatesWhereUniqueInput' type

Is the transcluded content visible to the class as a whole?

Using TypeScript with Vue and Pinia to access the store

Using renderProps in combination with TypeScript

turning off next.js server side rendering in order to avoid potential window is undefined issues