Tips for correctly decorating constructors in TypeScript

Question

Tips for correctly decorating constructors in TypeScript

When a class is wrapped with a decorator, the superclasses lose access to that classes' properties. But why does this happen?

I've got some code that demonstrates the issue:

First, a decorator is created which replaces the constructor of a class with a new one that should essentially perform the same task.
Next, a base class with a property is defined.
The base class is then wrapped with the decorating function.
A subclass is created that extends the base class.
Now when trying to access the property on the extended class, it fails to retrieve the value.

Take a look at the code snippet below:

function wrap(target: any) {
  // the new constructor
  var f: any = function (...args) {
      return new target();
  }

  f.prototype = target.prototype;
  return f;
}

@wrap
class Base {
    prop: number = 5;
}

class Extended extends Base {
    constructor() {
        super()
    }
}

var a = new Extended()
console.log(new Extended().prop) // I'm expecting 5 here, but I get undefined.

It seems like there's a subtlety related to either prototypes in general or the specific way TypeScript handles them that I haven't fully grasped yet.

typescript

Answer 1

Answer №1

This updated method leverages the latest TS version (3.2.4). It also utilizes the decorator factory design pattern, allowing for attributes to be passed in:

function CustomDecorator(attr: any) {
  return function _CustomDecorator<T extends {new(...args: any[]): {}}>(constr: T){
    return class extends constr {
      constructor(...args: any[]) {
        super(...args)
        console.log('Performing additional tasks after the original constructor!')
        console.log('Here is the specified attribute:', attr.attrName)
      }
    }
  }
}

For more information, visit: https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators

Answer 2

This updated method leverages the latest TS version (3.2.4). It also utilizes the decorator factory design pattern, allowing for attributes to be passed in:

function CustomDecorator(attr: any) {
  return function _CustomDecorator<T extends {new(...args: any[]): {}}>(constr: T){
    return class extends constr {
      constructor(...args: any[]) {
        super(...args)
        console.log('Performing additional tasks after the original constructor!')
        console.log('Here is the specified attribute:', attr.attrName)
      }
    }
  }
}

For more information, visit: https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators

Answer 3

Answer №2

This code snippet is what I use and it works perfectly:

function logClass(target: any) {
  // store a reference to the original constructor
  var original = target;

  // define new constructor behavior
  var f : any = function (...args) {
    console.log("New: " + original.name); 
    return new original(...args); // as per comments
  }

  // replicate prototype for instanceof operator compatibility
  f.prototype = original.prototype;

  // provide new constructor (overriding the original)
  return f;
}

@logClass
class Base {
    prop: number = 5;
}

class Extended extends Base {
    constructor() {
        super()
    }
}

var b = new Base()
console.log(b.prop)

var a = new Extended()
console.log(a.prop)

Answer 4

This code snippet is what I use and it works perfectly:

function logClass(target: any) {
  // store a reference to the original constructor
  var original = target;

  // define new constructor behavior
  var f : any = function (...args) {
    console.log("New: " + original.name); 
    return new original(...args); // as per comments
  }

  // replicate prototype for instanceof operator compatibility
  f.prototype = original.prototype;

  // provide new constructor (overriding the original)
  return f;
}

@logClass
class Base {
    prop: number = 5;
}

class Extended extends Base {
    constructor() {
        super()
    }
}

var b = new Base()
console.log(b.prop)

var a = new Extended()
console.log(a.prop)

Answer 5

Answer №3

One way to override the constructor using ES2015 Proxy:

function wrapConstructor(target: any) {
  return new Proxy(target, {
    construct(clz, args) {
      console.log(`Creating instance of ${target.name}`);
      return Reflect.construct(clz, args);
    }
  });
}

@wrapConstructor
class BaseClass {
  property: number = 5;
}

class ExtendedClass extends BaseClass {
  constructor() {
    super()
  }
}

var instanceA = new ExtendedClass()
console.log(new ExtendedClass().property);

For a live demo, you can try running this code on StackBlitz

Answer 6

One way to override the constructor using ES2015 Proxy:

function wrapConstructor(target: any) {
  return new Proxy(target, {
    construct(clz, args) {
      console.log(`Creating instance of ${target.name}`);
      return Reflect.construct(clz, args);
    }
  });
}

@wrapConstructor
class BaseClass {
  property: number = 5;
}

class ExtendedClass extends BaseClass {
  constructor() {
    super()
  }
}

var instanceA = new ExtendedClass()
console.log(new ExtendedClass().property);

For a live demo, you can try running this code on StackBlitz

Answer 7

Answer №4

Previous responses have mentioned that the code doesn't function properly.
In reality, it does work but not on jsFiddle...
This issue stems from the code generation in jsFiddle (potentially due to using an outdated version of TypeScript).
The provided code is compatible with TypeScript 2.7.2 (executed with Node).

Essentially, this is the same code as pablorsk's solution (sans the necessity to return the instance), with detailed types added for stricter TSLint compliance...

function logClass<T extends { new(...args: any[]): {} }>(): any {
    type Ctor = new (...args: any[]) => T;
    return (target: T): Ctor => {
        // Preserve the original constructor
        const Original = target;

        // Adjusted constructor behavior
        let decoratedConstructor: any = function (...args: any[]): void {
            console.log("Before construction:", Original);
            Original.apply(this, args);
            console.log("After construction");
        };

        // Maintain prototype for instanceof operator functionality
        decoratedConstructor.prototype = Original.prototype;
        // Duplicate static members as well
        Object.keys(Original).forEach((name: string) => { decoratedConstructor[name] = (<any>Original)[name]; });

        // Return updated constructor replacing the original one
        return decoratedConstructor;
    };
}

@logClass()
class Base {
    prop = 5;
    constructor(value: number) {
        console.log("Base constructor", value);
        this.prop *= value;
    }
    foo() { console.log("Foo", this.prop); }
    static s() { console.log("Static s"); }
}

class Extended extends Base {
    constructor(init: number) {
        super(init);
        console.log("Extended constructor", init);
    }
    bar() { console.log("Bar", this.prop); }
}

const b = new Base(2);
console.log("Base", b instanceof Base);
b.foo();
Base.s();

const e = new Extended(5);
console.log("Extended", e instanceof Base, e instanceof Extended);
e.bar();

[UPDATE] Included a line for copying static members to prevent errors when invoking the static method within the decorated class.

Answer 8

Previous responses have mentioned that the code doesn't function properly.
In reality, it does work but not on jsFiddle...
This issue stems from the code generation in jsFiddle (potentially due to using an outdated version of TypeScript).
The provided code is compatible with TypeScript 2.7.2 (executed with Node).

Essentially, this is the same code as pablorsk's solution (sans the necessity to return the instance), with detailed types added for stricter TSLint compliance...

function logClass<T extends { new(...args: any[]): {} }>(): any {
    type Ctor = new (...args: any[]) => T;
    return (target: T): Ctor => {
        // Preserve the original constructor
        const Original = target;

        // Adjusted constructor behavior
        let decoratedConstructor: any = function (...args: any[]): void {
            console.log("Before construction:", Original);
            Original.apply(this, args);
            console.log("After construction");
        };

        // Maintain prototype for instanceof operator functionality
        decoratedConstructor.prototype = Original.prototype;
        // Duplicate static members as well
        Object.keys(Original).forEach((name: string) => { decoratedConstructor[name] = (<any>Original)[name]; });

        // Return updated constructor replacing the original one
        return decoratedConstructor;
    };
}

@logClass()
class Base {
    prop = 5;
    constructor(value: number) {
        console.log("Base constructor", value);
        this.prop *= value;
    }
    foo() { console.log("Foo", this.prop); }
    static s() { console.log("Static s"); }
}

class Extended extends Base {
    constructor(init: number) {
        super(init);
        console.log("Extended constructor", init);
    }
    bar() { console.log("Bar", this.prop); }
}

const b = new Base(2);
console.log("Base", b instanceof Base);
b.foo();
Base.s();

const e = new Extended(5);
console.log("Extended", e instanceof Base, e instanceof Extended);
e.bar();

[UPDATE] Included a line for copying static members to prevent errors when invoking the static method within the decorated class.

Answer 9

Answer №5

If you enjoy working with decorators in TypeScript to run code before and after the constructor function:

function DecorateConstructor() {
    return function(target: any) {
        // storing reference to original constructor
        var original = target;

        // defining new constructor behavior
        var f: any = function (...args) {
            console.log('DecorateConstructor: before class constructor', original.name);
            let instance = original.apply(this, args)
            console.log('DecorateConstructor: after class constructor', original.name);
            return instance;
        }

        // maintaining compatibility with instanceof operator
        f.prototype = original.prototype;

        // returning new constructor (overriding original)
        return f;
    };
}
@DecorateConstructor()
export class ExampleClass {
    public constructor() {
        console.info('Executing ExampleClass constructor...');
    }
}

let exampleObject = new ExampleClass();

/*
CONSOLE OUTPUT:
DecorateConstructor: before class constructor ExampleClass
Executing ExampleClass constructor...
DecorateConstructor: after class constructor ExampleClass
*/

Answer 10

If you enjoy working with decorators in TypeScript to run code before and after the constructor function:

function DecorateConstructor() {
    return function(target: any) {
        // storing reference to original constructor
        var original = target;

        // defining new constructor behavior
        var f: any = function (...args) {
            console.log('DecorateConstructor: before class constructor', original.name);
            let instance = original.apply(this, args)
            console.log('DecorateConstructor: after class constructor', original.name);
            return instance;
        }

        // maintaining compatibility with instanceof operator
        f.prototype = original.prototype;

        // returning new constructor (overriding original)
        return f;
    };
}
@DecorateConstructor()
export class ExampleClass {
    public constructor() {
        console.info('Executing ExampleClass constructor...');
    }
}

let exampleObject = new ExampleClass();

/*
CONSOLE OUTPUT:
DecorateConstructor: before class constructor ExampleClass
Executing ExampleClass constructor...
DecorateConstructor: after class constructor ExampleClass
*/

Tips for correctly decorating constructors in TypeScript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to relocate the styles folder to the src folder while using nextjs, typescript, and tailwind

Creating a conditional interface based on props in TypeScript: A step-by-step guide

Angular 2 Login Component Featuring Customizable Templates

"Using an indexer in TypeScript allows for direct access to object properties by simply specifying the key within

The router's handler function sends back a collection of objects, but for some reason, the client is not receiving them in JSON format even though the response

What is the best way to click on a particular button without activating every button on the page?

Set the default value for a form control in a select dropdown using Angular

`How can I effectively test a React.js page utilizing both Context and useEffect?`

Creating an Observable from static data in Angular that resembles an HTTP request

Angular offers pre-determined values that cannot be altered, known as "

Issue with webpack dev server not correctly generating output files to be included in index.html

Alternative for using useRouteMatch to retrieve parameters

Implementing computed properties: A guide to incorporating type setting

How can Angular developers properly implement token refreshing in their applications?

Dealing with circular dependencies in NestJS by using ForwardRef

Combining 2 Observables in nestjs Interceptor: A Step-by-Step Guide

Issues with implementing Dark mode in TailwindCSS with Nuxt.js

Angular2 and Typescript paired with Visual Studio 2013

If you're trying to work with this file type, you might require a suitable loader. Make sure you

The variable <variable> is not meeting the 'never' constraint. Error code: ts(2344)