如何在TypeScript中使用装饰器正确包装构造函数

Question

使用装饰器包装类的过程会导致超类无法访问该类的属性.为什么？

我有一些代码:

1. 创建一个装饰器,用一个新的构造函数替换类的构造函数,该构造函数应该完全相同.
2. 使用属性创建基类.
3. 用包装装饰器包装基类.
4. 创建一个扩展基类的类.
5. 尝试访问扩展类的属性.这是失败的部分.

这是代码:

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.

我确信这是一般原型的一些细微差别,或者是TypeScript处理它们的具体方式,我没有掌握.

Answer 1

此代码的工作对我来说:

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)
  }

  // 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)

Answer 2

使用 ES2015 Proxy 覆盖构造函数的解决方案：

function wrap(target: any) {
  return new Proxy(target, {
    construct(clz, args) {
      console.log(`Constructing ${target.name}`);
      return Reflect.construct(clz, args);
    }
  });
}

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

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

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

你也可以在 StackBlitz 上运行它

Answer 3

这是使用最新TS（3.2.4）的更现代的方法。下面还使用了装饰器工厂模式，因此您可以传递属性：

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)
      }
    }
  }
}

请参阅此处以获取更多信息：https : //www.typescriptlang.org/docs/handbook/decorators.html#class-decorators