[方法装饰器](https://saul-mirone.github.io/zh-hans/a-complete-guide-to-typescript-decorator/)

# 语法

```typescript
type MethodDecorator = <T>(
  target: Object,
  propertyKey: string | symbol,
  descriptor: TypedPropertyDescriptor<T>
) => TypedPropertyDescriptor<T> | void;
```

(1)target: 对于静态成员来说是类的构造器，对于实例成员来说是类的原型链。
(2)propertyKey: 属性的名称。
(3)descriptor: 属性的描述器。

方法装饰器不同于属性装饰器的地方在于descriptor参数。 通过这个参数我们可以修改方法原本的实现，添加一些共用逻辑。 例如我们可以给一些方法添加打印输入与输出的能力：

```typescript
function logger(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;

descriptor.value = function (...args) {
    console.log('params: ', ...args);
    const result = original.call(this, ...args);
    console.log('result: ', result);
    return result;
  }
}

class C {
  @logger
  add(x: number, y:number ) {
    return x + y;
  }
}

const c = new C();
c.add(1, 2);
// -> params: 1, 2
// -> result: 3
```

上面的例子，很像 Java 里的 AOP - Aspect Oriented Programming, 面向切片编程。

运行时，我们装饰器施加的 target：

![](https://img-blog.csdnimg.cn/img_convert/e08d9a2a9d4aaeaf70ff3022dd7f418f.png)

key 是被修饰的 add 方法的字符串名称：

![](https://img-blog.csdnimg.cn/img_convert/479b234f43ab64758c4819fb589ff955.png)

descriptor 的 value 属性指向了 add 方法的原始实现：

![](https://img-blog.csdnimg.cn/img_convert/9faf024d77a3b05cc9047a2a77859d44.png)

...arg 代表任意数量的参数：

![](https://img-blog.csdnimg.cn/img_convert/a302b7f3a333df4a08d0a8323c592b3a.png)

第 57 行的 Object.defineProperty, 将类的 add 方法修改成包含了 log 功能的新版本：

![](https://img-blog.csdnimg.cn/img_convert/cba67fa4b3f189b8ecc8b40dbba06c1e.png)

这样，稍后我们调用 add 方法时，这个新版本就得以执行了：

![](https://img-blog.csdnimg.cn/img_convert/c12f9145b6fe5a48f8b7e2ed518414e0.png)

ITPub博客

使用 TypeScript 自定义装饰器给类的方法增添监听器 Listener

最新文章