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

Question

用装饰器包装类的过程会导致父类(super class)无法访问该类的属性。为什么？

我有一些代码:

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.

我确信这是一般原型(prototype)或 TypeScript 处理它们的特定方式的一些细微差别，我不了解。

Answer 1

这是使用最新 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