TypeScript（ts）学习笔记（九）：装饰器

学习装饰器之前我们首先要明确一个概念：
装饰器本质上是一个函数，@expression 的形式其实是一个语法糖， expression 求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。
在 Typescript 中使用装饰器需要我们在 tsconfig.json 里面开启支持选项 experimentalDecorators。

// tsconfig.json
"experimentalDecorators": true

类装饰器

声明一个函数去给 Class 的 age属性赋值：

function addAge(constructor: Function) {
  constructor.prototype.age = 22;
}

@addAge
class Person {
  name: string;
  age!: number;
  constructor() {
    this.name = "朱小明"
  }
}
let p = new Person();

console.log(p.age); //22

这段代码实际上基本等同于：

Person = addAge(function Person() { ... });

方法装饰器

方法装饰器声明在一个方法的声明之前，它会被应用到方法的属性描述符descriptor上，可以用来监视，修改或者替换方法定义。
方法装饰器会在运行时当作函数被调用，传入3个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字。
成员的属性描述符。
如果方法装饰器返回一个值，它会被用作方法的属性描述符。如果代码输出目标版本小于ES5返回值会被忽略。

class Person {
  name: string;
  constructor(name:string) {
    this.name = name;
  }
  @fun(false)
  static say() {
    return "hello" + this.name
  }
}
function fun(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("target",target);
    console.log("propertyKey",propertyKey);
    descriptor.enumerable = value
    console.log(descriptor);
  }
}

const p = new Person("zhangsan")

输出结果如下：

target [Function: Person] { say: [Function] }
propertyKey say
{
  value: [Function],
  writable: true,
  enumerable: false,
  configurable: true
}

当 @fun(false) 被调用时，它会修改属性描述符的 enumerable 属性。

访问器装饰器

TypeScript 不允许同时装饰一个成员的get和set访问器，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的。
访问器装饰器被调用时，传入3个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字。
成员的属性描述符。

class Person {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  @configurable(false)
  get getName() {
    return this.name
  }
}
function configurable(value: boolean) {
  return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log(descriptor);
    descriptor.configurable = value
  }
}
const p = new Person("丁大宝")
console.log(p.getName);

输出结果如下：

{
  get: [Function: get],
  set: undefined,
  enumerable: true,
  configurable: true
}
丁大宝

属性装饰器

属性装饰器声明在一个属性声明之前，属性装饰器表达式在运行时被调用，传入下列2个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
成员的名字。

注意：属性描述符不会做为参数传入属性装饰器

class Person{
  @format("尼古拉斯·赵四")
  name: string|undefined;
  constructor() {
  }
}
function format(value: string) {
  return function (target: any, propertyKey: string) {
    target[propertyKey] = value
  }
}
const p = new Person()
console.log(p.name); //尼古拉斯·赵四

参数装饰器

参数装饰器声明在一个参数声明之前（紧靠着参数声明）。
参数装饰器表达式需要传入下列3个参数：

对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
参数名称
参数的索引

function getParams(target: Object, propertyKey: string, index: number) {
  console.log(target,propertyKey,index);
}
class Person {
  getInfo(@getParams name: string, @getParams age: number) {
    return `${name}${age}岁了`
  }
}

const p = new Person();
console.log(p.getInfo("zhangsan",20));

输出结果如下：

Person { getInfo: [Function] } getInfo 1
Person { getInfo: [Function] } getInfo 0
zhangsan20岁了

装饰器工厂

如果我们需要几个装饰器分别装饰到不同的成员上。我们可能会用下面这种写法：

@logClass
class Person{
  @logProperty
  name: string;
  constructor(name:string) {
    this.name = name;
  }
  @logMethod
  getName() {
    return this.name
  }
}
// 类装饰器
function logClass(target: typeof Person) {
  console.log(target);
}
// 属性装饰器
function logProperty(target: any, propertyKey: string) {
  console.log(propertyKey);
}
// 方法装饰器
function logMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  console.log(descriptor);
}

虽然可以达到我们想要的效果，但我们还可以继续优化，用一个装饰器工厂来进一步抽象上述代码：

function log(...args: any[]) {
  switch (args.length) {
    case 1:
      return logClass.apply(this, args);
    case 2:
      return logProperty.apply(this, args);
    case 3:
      return logMethod.apply(this, args)
    default: 
      throw new Error("error")
  }
}

装饰器组合

在TypeScript里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：

由上至下依次对装饰器表达式求值。
求值的结果会被当作函数，由下至上依次调用。
如果我们使用[装饰器工厂]的话，可以通过下面的例子来观察它们求值的顺序：

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

输出结果如下：

f(): evaluated
g(): evaluated
g(): called
f(): called

装饰器求值顺序：

参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。
参数装饰器应用到构造函数。
类装饰器应用到类。