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

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

我有一些代码:

创建一个装饰器,用一个新的构造函数替换类的构造函数,该构造函数应该完全相同.

使用属性创建基类.

用包装装饰器包装基类.

创建一个扩展基类的类.

尝试访问扩展类的属性.这是失败的部分.

这是代码:

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处理它们的具体方式,我没有掌握.

1> TSV..：

---

此代码的工作对我来说:

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)

---

对我不起作用.抛出此错误:`TypeError:如果没有'new',则无法调用类构造函数Base

---

ES6将抛出TypeError：类构造函数Base不能在没有“ new”错误的情况下被调用。只需将`original.apply（this，args）`替换为`new original（args）`，它应该可以工作。

2> etech..：

---

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

function DecoratorName(attr: any) {
  return function _DecoratorName(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