How to properly wrap constructors with decorators in TypeScript

Question

The process of wrapping a class with a decorator causes superclasses to be unable to access that classes' properties. Why?

I have some code that:

1. Creates a decorator which replaces the constructor of a class with a new constructor that should do the exact same thing.
2. Creates a base class with a property.
3. Wraps the base class with the wrapping decorator.
4. Creates a class that extends the base class.
5. Tries to access the property on the extended class. This is the part that fails.

Here is the code:

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. 

I'm sure this is some nuance of either prototypes in general or the specific way that TypeScript handles them that I do not grasp.

Answer 1

This is the more modern approach using the latest TS (3.2.4). The below also uses the decorator factory pattern so you can pass in attributes:

function DecoratorName(attr: any) {   return function _DecoratorName<T extends {new(...args: any[]): {}}>(constr: T){     return class extends constr {       constructor(...args: any[]) {         super(...args)         console.log('Did something after the original constructor!')         console.log('Here is my attribute!', attr.attrName)       }     }   } } 

See here for more info: https://www.typescriptlang.org/docs/handbook/decorators.html#class-decorators

Answer 2

This code works for me:

function logClass(target: any) {   // save a reference to the original constructor   var original = target;    // the new constructor behaviour   var f : any = function (...args) {     console.log("New: " + original.name);      //return  original.apply(this, args);     return new original(...args); // according the comments   }    // copy prototype so intanceof operator still works   f.prototype = original.prototype;    // return new constructor (will override 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)