Ts_09装饰器

装饰器

学习目标

• 了解装饰器语法，学会使用装饰器对类进行扩展
• 清楚装饰器执行顺序
• 了解元数据以及针对装饰器的元数据编程

什么是装饰器

装饰器-Decorators 在 TypeScript 中是一种可以在不修改类代码的基础上通过添加标注的方式来对类型进行扩展的一种方式

• 减少代码量
• 提高代码扩展性、可读性和维护性

在 TypeScript 中，装饰器只能在类中使用

装饰器语法

装饰器的使用极其的简单

• 装饰器本质就是一个函数
• 通过特定语法在特定的位置调用装饰器函数即可对数据（类、方法、甚至参数等）进行扩展

启用装饰器特性

• experimentalDecorators: true

// 装饰器函数
function log(target: Function, type: string, descriptor: PropertyDescriptor) {
    let value = descriptor.value;

    descriptor.value = function(a: number, b: number) {
        let result = value(a, b);
        console.log('日志：', {
            type,
            a,
            b,
            result
        })
        return result;
    }
}

// 原始类
class M {
    @log
    static add(a: number, b: number) {
        return a + b;
    }
    @log
    static sub(a: number, b: number) {
        return a - b;
    }
}

let v1 = M.add(1, 2);
console.log(v1);
let v2 = M.sub(1, 2);
console.log(v2);

装饰器

装饰器 是一个函数，它可以通过 @装饰器函数 这种特殊的语法附加在 类、方法 、访问符、属性、参数 上，对它们进行包装，然后返回一个包装后的目标对象（类、方法 、访问符、属性、参数 ），装饰器工作在类的构建阶段，而不是使用阶段

function 装饰器1() {}
...

@装饰器1
class MyClass {
  
  @装饰器2
  a: number;
  
  @装饰器3
  static property1: number;
  
  @装饰器4
  get b() { 
    return 1; 
  }
  
  @装饰器5
  static get c() {
    return 2;
  }
  
  @装饰器6
  public method1(@装饰器5 x: number) {
    //
  }
  
  @装饰器7
  public static method2() {}
}

类装饰器

目标

• 应用于类的构造函数

参数

• 第一个参数（也只有一个参数）
  • 类的构造函数作为其唯一的参数

方法装饰器

目标

• 应用于类的方法上

参数

• 第一个参数
  • 静态方法：类的构造函数
  • 实例方法：类的原型对象
• 第二个参数
  • 方法名称
• 第三个参数
  • 方法描述符对象

属性装饰器

目标

• 应用于类的属性上

参数

• 第一个参数
  • 静态方法：类的构造函数
  • 实例方法：类的原型对象
• 第二个参数
  • 属性名称

访问器装饰器

目标

• 应用于类的访问器（getter、setter）上

参数

• 第一个参数
  • 静态方法：类的构造函数
  • 实例方法：类的原型对象
• 第二个参数
  • 属性名称
• 第三个参数
  • 方法描述符对象

参数装饰器

目标

• 应用在参数上

参数

• 第一个参数
  • 静态方法：类的构造函数
  • 实例方法：类的原型对象
• 第二个参数
  • 方法名称
• 第三个参数
  • 参数在函数参数列表中的索引

装饰器执行顺序

实例装饰器

	属性 => 访问符 => 参数 => 方法

静态装饰器

	属性 => 访问符 => 参数 => 方法

类

	类

装饰器工厂

如果我们需要给装饰器执行过程中传入一些参数的时候，就可以使用装饰器工厂来实现

// 装饰器函数
function log(callback: Function) {
  	return function(target: Function, type: string, descriptor: PropertyDescriptor) {
     	 	let value = descriptor.value;

        descriptor.value = function(a: number, b: number) {
            let result = value(a, b);
            callback({
                type,
                a,
                b,
                result
            });
            return result;
        }
    }
}

// 原始类
class M {
    @log(function(result: any) {
      	console.log('日志：', result)
    })
    static add(a: number, b: number) {
        return a + b;
    }
    @log(function(result: any) {
      	localStorage.setItem('log', JSON.stringify(result));
    })
    static sub(a: number, b: number) {
        return a - b;
    }
}

let v1 = M.add(1, 2);
console.log(v1);
let v2 = M.sub(1, 2);
console.log(v2);

元数据

在 装饰器 函数中 ，我们可以拿到 类、方法 、访问符、属性、参数 的基本信息，如它们的名称，描述符 等，但是我们想获取更多信息就需要通过另外的方式来进行：元数据

什么是元数据？

元数据 ：用来描述数据的数据，在我们的程序中，对象、类 等都是数据，它们描述了某种数据，另外还有一种数据，它可以用来描述 对象、类，这些用来描述数据的数据就是 元数据

比如一首歌曲本身就是一组数据，同时还有一组用来描述歌曲的歌手、格式、时长的数据，那么这组数据就是歌曲数据的元数据

使用 reflect-metadata

https://www.npmjs.com/package/reflect-metadata

首先，需要安装 reflect-metadata

npm install reflect-metadata

定义元数据

我们可以 类、方法 等数据定义元数据

• 元数据会被附加到指定的 类、方法 等数据之上，但是又不会影响 类、方法 本身的代码

设置

Reflect.defineMetadata(metadataKey, metadataValue, target, propertyKey)

• metadataKey：meta 数据的 key
• metadataValue：meta 数据的 值
• target：meta 数据附加的目标
• propertyKey：对应的 property key

调用方式

• 通过 Reflect.defineMetadata 方法调用来添加 元数据

• 通过 @Reflect.metadata 装饰器来添加 元数据

import "reflect-metadata"

@Reflect.metadata("n", 1)
class A {
    @Reflect.metadata("n", 2)
    public static method1() {
    }
  
  	@Reflect.metadata("n", 4)
  	public method2() {
    }
}

// or
Reflect.defineMetadata('n', 1, A);
Reflect.defineMetadata('n', 2, A, 'method1');

let obj = new A();
Reflect.defineMetadata('n', 3, obj);
Reflect.defineMetadata('n', 4, obj, 'method2');

console.log(Reflect.getMetadata('n', A));
console.log(Reflect.getMetadata('n', A, ));

获取

Reflect.getMetadata(metadataKey, target, propertyKey)

参数的含义与 defineMetadata 对应

使用元数据的 log 装饰器

import "reflect-metadata"

function L(type = 'log') {
  	return function(target: any) {
      	Reflect.defineMetadata("type", type, target);
    }
}
// 装饰器函数
function log(callback: Function) {
  	return function(target: any, name: string, descriptor: PropertyDescriptor) {
     	 	let value = descriptor.value;
      
      	let type = Reflect.getMetadata("type", target);

        descriptor.value = function(a: number, b: number) {
            let result = value(a, b);
          	if (type === 'log') {
              	console.log('日志：', {
                  name,
                  a,
                  b,
                  result
                })
            }
          	if (type === 'storage') {
                localStorage.setItem('storageLog', JSON.stringify({
                  name,
                  a,
                  b,
                  result
                }));
            }
            return result;
        }
    }
}

// 原始类
@L('log')
class M {
    @log
    static add(a: number, b: number) {
        return a + b;
    }
    @log
    static sub(a: number, b: number) {
        return a - b;
    }
}

let v1 = M.add(1, 2);
console.log(v1);
let v2 = M.sub(1, 2);
console.log(v2);

使用 emitDecoratorMetadata

在 tsconfig.json 中有一个配置 emitDecoratorMetadata，开启该特性，typescript 会在编译之后自动给 类、方法 、访问符、属性、参数 添加如下几个元数据

• design:type：被装饰目标的类型
  • 成员属性：属性的标注类型
  • 成员方法：Function 类型
• design:paramtypes
  • 成员方法：方法形参列表的标注类型
  • 类：构造函数形参列表的标注类型
• design:returntype
  • 成员方法：函数返回值的标注类型

import "reflect-metadata"

function n(target: any) {
}
function f(name: string) {
    return function(target: any, propertyKey: string, descriptor: any) {
      	console.log( 'design type', Reflect.getMetadata('design:type', target, propertyKey) );
        console.log( 'params type', Reflect.getMetadata('design:paramtypes', target, propertyKey) );
        console.log( 'return type', Reflect.getMetadata('design:returntype', target, propertyKey) );
    }
}
function m(target: any, propertyKey: string) {

}

@n
class B {
    @m
    name: string;

    constructor(a: string) {

    }

    @f('')
    method1(a: string, b: string) {
        return 'a'
    }
}

编译后

__decorate([
    m,
    __metadata("design:type", String)
], B.prototype, "name", void 0);
__decorate([
    f(''),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", [String, String]),
    __metadata("design:returntype", void 0)
], B.prototype, "method1", null);
B = __decorate([
    n,
    __metadata("design:paramtypes", [String])
], B);