NestJS装饰器

最近用nestjs做了一个前后端的全栈项目，在nestjs中看到的装饰器无处不在，今天主要回顾下关于装饰器的那些事

本文主要会从以下几点认识装饰器

装饰器是什么，它解决了什么样的问题
装饰器如何作用在类上
装饰器在类、方法、属性、形参上有什么区别

什么是装饰器

在decorator[1]中有讲到，装饰器是一种函数，增强JS类的能力，它可以装饰函数，装饰属性，或者装饰类。是通过@fn方式来装饰的。

在使用之前，我们必须开启tsconfig.json的experimentalDecorators选项，这样我们就可以使用装饰器了

 // tsconfig.json
{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

类上的装饰器

 // index.ts
function test(target: any) {
  console.log(target);
  console.log(new target().name);
}
@test
class Person {
  constructor(public name: string) {
    this.name = "Web技术学苑";
  }
}

执行npx ts-node index.ts

我们会发现，当我在类上使用一个装饰器时，target这个默认的形参就说class Person这个构造函数

所以我在test的装饰器内部去new target()相当于是new Person()

方法上的装饰器

主要这个装饰器会用在方法上，我们会发现@getName装饰器是放在getName上的

 function getName(target: any, key: string, descriptor: any) {
  console.log(target, key, descriptor);
  const fn = descriptor.value;
  console.log(fn()) // Maic
}
class Person {
  constructor(public name: string) {
    this.name = "Web技术学苑";
  }
  @getName
  getName() {
    // return this.name;
    return 'Maic'
  }
}

当我们npx ts-node index.ts时,输出的结果如下

target就是一个对象
key就是getName方法名
descriptor包含了一个value的对象值

当我们发现descriptor的value时一个可执行函数时，其实就是getName返回的值

 {} 
getName
{
  value: [Function: getName],
  writable: true,
  enumerable: false,
  configurable: true
}

我们以另外一个具体的例子来感受下,在方法中使用装饰器

自定义Get装饰器

 function getName(target: any, key: string, descriptor: any) {
  //console.log(target, key, descriptor);
  const fn = descriptor.value;
  const result = fn();
  console.log(result);
}

function Get(url: string) {
  return (target: any, key: string, descriptor: any) => {
    const request = fetch(url);
    const fn = descriptor.value;
    request
      .then((res) => res.json())
      .then((result) => {
        fn.call(target,result);
      });
  };
}
class Person {
  constructor(public name: string) {
    this.name = "Web技术学苑";
  }
  @getName
  getName() {
    return "Maic";
  }
  @Get("https://movie.douban.com/j/search_tags?type=movie&source=index")
  getUserInfo(res: any) {
    console.log(res);
  }
}

运行npx ts-node index.ts

所以我们通过自定义装饰器@Get('xxx')达到了我们想要的效果，注意在@Get中是接收了一个参数,然后在Get中返回了一个函数

Get中有形参
返回了一个函数
在返回的函数的三个参数依次是target、key, descriptor其中target是{},key是getUserInfo,descriptor是一个可枚举对象

在Get方法中并没有返回，而是通过回调的方式将结果输出了，所以一个简单的路由装饰器Get方法就已经完成了，这在nestjs中非常的常用，你会看到很多诸如Get与Post的装饰器。

函数形参上的装饰器

装饰器也可以用在形参上,因此我们定义了一个@userParams，不过此事装饰器的中的target是一个对象，key是当前函数名，第三个参数是当前形参的索引

 function userParams(target: any, key: string, index: number) {
  console.log(target, key, index, "===");
}

class Person {
  constructor(public name: string, public useInfo: any) {
    this.name = "Web技术学苑";
    this.useInfo = {
      age: 18,
      sex: "男",
    };
  }
  setUseInfo(@userParams params: any = { age: "10" }) {
    return this.name;
  }
}

属性上的装饰器

我们从以下代码中发现，在属性上的装饰器与方法上的形参有所不同，属性装饰器只有两个参数，第一个参数返回一个对象，第二个参数是当前属性名称。

 function getAge(target: any, key: string) {
  console.log(target, "==getAge");
  console.log(key, "=key");
}
class Person {
  @getAge
  public age: number;
  constructor(public name: string, public useInfo: any) {
    this.name = "Web技术学苑";
    this.useInfo = {
      age: 18,
      sex: "男",
    };
    this.age = 18;
  }
}

在关于装饰器的设计中，它帮我们解决了什么样的问题，这点在nestjs中关于装饰器无处不在，在鉴权、路由、Module等等，都是使用装饰器，这将极大的抽象了复杂的逻辑，方便我们在业务开发中拿来即用。

最后关于装饰器[2]我们也可以参考这篇文章，学习更多关于装饰器更多内容

总结

了解装饰器的用处，本质上装饰器就是函数，通过@修饰函数变成了装饰器，增强了类的能力，可以修饰类、属性、方法、形参
比较了装饰器在类、方法、函数形参、属性的不同，通过自定义装饰器@Get深入了解到装饰器在方法上的使用
code example[3]

参考资料

[1]decorator： https://es6.ruanyifeng.com/#docs/decorator

[2]装饰器： https://github.com/tc39/proposal-decorators

[3]code example： hhttps://github.com/maicFir/lessonNote/tree/master/nest/01-装饰器