概述

装饰器（decorator）是面向对象的概念（在java中叫注解，c#中叫特征）

angular大量使用，react中也会用到，之前前端用的很少，目前越来越多

JS支持装饰器，但是目前不是最终阶段，还未成为标准

在TS中使用装饰器，需要开启 experimentalDecorators 配置

解决的问题

装饰器能够带来额外的信息量，可以达到分离关注点的目的。

比如有个User类，它里面的很多属性，需要进行规则校验，怎么做合适呢

  1. 把所有校验逻辑抽离到一个单独的函数内，即便让其成为类的成员方法，也有缺陷
    1. 我们是写属性的时候最清楚这个属性想表达什么，校验规则是啥；而不是在函数里一一处理
    2. 虽然对于重复代码可以一直抽离为新的函数，但是这样代码仍然多，函数很多

关注点的问题：

  • 在定义某个东西时，应该最清楚该东西的情况，而不是在其他时刻再去根据我们自己的判断写一次代码
    • 简述为：信息书写位置的问题
  • 重复代码/过多函数问题

上述两个问题产生的根源：某些信息，在定义时，能够附加的信息量有限。导致虽然我们清楚这些附加信息（比如我们写的注释的信息），但是编程语言、计算机它不知道啊！

装饰器的作用：为某些属性、类、参数、方法提供元数据（metadata）信息
元数据：描述数据 的 数据/信息

装饰器的本质

在JS中，装饰器本质上是一个函数。（装饰器是要参与运行的！）
装饰器可以修饰：类/成员（属性+方法）/参数

类装饰器

类装饰器的本质

记住！它必须是一个函数，该函数必须接收一个参数，该必须参数表示类本身（构造函数本身）
使用装饰器： @函数名

在TS中如何约束一个变量为类？

  • target: Function
    • 但是不能new target了，因为TS不知道你到底是类还是普通函数

  • target: new (…args: any[]) => object

    • 这样就表示target是一个类！且可以传constructor任意的参数

      类装饰器函数运行的时间

      在类定义后立即运行

      类装饰器可以具有的返回值

  • void：仅运行函数

  • 返回一个新的类：会将新的类替换掉装饰目标，所以这里要小心啊，一般是用于加强功能，取继承即可
    • 即便用继承，仍有危险，因为返回的儿子类没有类型检查！本质是因为target是动态的，无法确定

      想给装饰器传其他参数怎么办？

      ```typescript type constructor = new (…args: any[]) => object

function d1(name: string){ console.log(‘这个d1是装饰器的包装层, 普通函数’) return function (target: constructor){ console.log(‘这个函数才是真正的装饰器’) } }

@d1(‘wjw’)// 这里这个d1(‘wjw’)只是个普通的函数 class A { prop1: string }

  1. <a name="vHLtA"></a>
  2. ## 多个类装饰器函数运行顺序
  3. **真正返回的类装饰器函数是从下至上运行，但是包装层即普通函数是正常的从上至下顺序**<br />**如果还有方法和属性装饰器的包装层，则先执行他们，最后再执行类装饰器的包装层！**
  4. ```typescript
  5. type constructor = new (...args: any[]) => object
  7. function d1(name: string){
  8.   console.log('1. 这个d1是装饰器的包装层')
  9.     return function (target: constructor){
  10.       console.log('4. 这个函数才是真正的d1装饰器')
  11.   }
  12. }
  14. function d2(name: string){
  15.     console.log('2. 这个d2是装饰器的包装层')
  16.       return function (target: constructor){
  17.         console.log('3. 这个函数才是真正的d2装饰器')
  18.     }
  19.   }
  21. @d1('wjw')
  22. @d2('wqq')
  23. class A {
  24.     prop1: string
  25.     constructor(){
  26.         this.prop1 = 'wjw'
  27.         console.log('A')
  28.     }
  29. }

编译后的结果：

  1. var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  2.     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  3.     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  4.     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  5.     return c > 3 && r && Object.defineProperty(target, key, r), r;
  6. };
  7. function d1(name) {
  8.     console.log('1. 这个d1是装饰器的包装层');
  9.     return function (target) {
  10.         console.log('4. 这个函数才是真正的d1装饰器');
  11.     };
  12. }
  13. function d2(name) {
  14.     console.log('2. 这个d2是装饰器的包装层');
  15.     return function (target) {
  16.         console.log('3. 这个函数才是真正的d2装饰器');
  17.     };
  18. }
  19. let A = class A {
  20.     constructor() {
  21.         this.prop1 = 'wjw';
  22.         console.log('A');
  23.     }
  24. };
  25. A = __decorate([
  26.     d1('wjw'),
  27.     d2('wqq')
  28. ], A);

成员装饰器

均可以有多个装饰器修饰

属性装饰器

属性装饰器也是一个函数，该函数需要两个参数

  1. 如果是静态属性，则为类本身。如果是实例属性，则为类的原型

  2. 固定为一个字符串，表示属性名

    方法装饰器

    同样，方法装饰器也是一个函数，该函数需要三个参数

  3. 同上

  4. 固定为一个字符串，表示方法名
  5. 属性描述对象，也是Object.defineProperty的第三个参数

练习：类和属性的描述装饰器

  1. function printObj(obj: any) {
  2.     if(obj.$classDescriptor){
  3.         console.log(obj.$classDescriptor);
  4.     }else{
  5.         console.log(obj.__proto__.constructor.name);
  6.     }
  8.     if(obj.$propDescriptions){
  9.         console.log(obj.$propDescriptions);
  10.     }else{
  11.         obj.$propDescriptions = [];
  12.     }
  13.     for(const key in obj){
  14.         if(obj.hasOwnProperty(key)){
  15.            const prop = obj.$propDescriptions.find((p: any) => p.propName === key)
  16.            if(prop){
  17.                console.log(`\t${prop.description}: ${obj[key]}`)
  18.            }else{
  19.                console.log(`\t${key}: ${obj[key]}`)
  20.            }
  21.         }
  22.     }
  23. }
  25. type construct = new (...args: any[]) => object;
  26. function classDescriptor(description: string) {
  27.     return function (target: Function) {
  28.         // 保存到该类到原型中
  29.         target.prototype.$classDescriptor = description;
  30.     }
  31. }
  33. function propDescriptor(description: string) {
  34.     return function (target: any, propName: string) {
  35.         // 把所有的属性信息保存到该类的原型中
  36.         if(!target.$propDescriptions){
  37.             target.$propDescriptions = [];
  38.         }
  39.         target.$propDescriptions.push({propName,description})
  40.     }
  41. }
  43. @classDescriptor('用户')
  44. class User_1 {
  45.     @propDescriptor('账号')
  46.     loginId: string
  48.     @propDescriptor('密码')
  49.     loginPwd: string
  51.     constructor(loginId: string, loginPwd: string){
  52.         this.loginId = loginId
  53.         this.loginPwd = loginPwd
  54.     }
  55. }
  57. const u = new User_1('234', 'ewr');
  59. printObj(u);

reflect-metadata库

上述代码，美中不足的地方在于，污染了原型链！
而这个库的作用就是：在另外一个地方保存元数据！避免污染原型链
这个库在运行时也需要依赖，所以在生产环境。

Reflect.getMetadata()会得到一个装饰器！
Reflect.metadata()会产生一个装饰器
Reflect.getOwnMetadata()
Reflect.defineMetadata()查官网api吧

  1. import "reflect-metadata"
  3. const key = Symbol.for('descriptor');// 每次都会返回一个独一无二的symbol对象
  5. type construct = new (...args: any[]) => object;
  7. function descriptor1(description: string) {
  8.     console.log(description)
  9.     // metadata自己可以区分，我们把附加信息加到类还是属性/方法上。但是！写在这里是区分不出来的，得写到类的上一行
  10.     return Reflect.metadata(key, description)
  11. }
  13. function printObj(obj: any) {
  14.     const cons = Object.getPrototypeOf(obj)
  15.     // 输出类的名字
  16.     if(Reflect.hasMetadata(key, cons)){
  17.         console.log('\n', Reflect.getMetadata(key, cons), Reflect.getOwnMetadata(key, cons));
  18.     }else{
  19.         console.log('\n', cons.constructor.name, ',', Reflect.getMetadata(key, cons), Reflect.getOwnMetadata(key, cons));
  20.     }
  22.     // 输出所有的属性描述和属性值
  23.     for(const k in obj){
  24.         console.log(k)
  25.         if(Reflect.hasMetadata(key, obj, k)){
  26.             console.log(`\t${Reflect.getMetadata(key, obj, k)}：${obj[k]}`)
  27.         }else{
  28.             console.log(`\t${k}：${obj[k]}`)
  29.         }
  30.     }
  31. }
  33. @descriptor1('文章')
  34. class Article {
  35.     @descriptor1('方法1')
  36.     method(){
  37.         console.log('method...')
  38.     }
  39.     @descriptor1('标题')
  40.     title: string
  42.     @descriptor1('内容')
  43.     content: string
  45.     @descriptor1('日期')
  46.     date: Date
  47. }
  49. const ar = new Article();
  50. ar.title = 'xxxxx';
  51. ar.content = 'adf234jsd';
  52. ar.date = new Date();
  54. 方法1
  55. 标题
  56. 内容
  57. 日期
  58. 文章
  60.  Article , undefined undefined
  61. title
  62.         标题：xxxxx
  63. content
  64.         内容：adf234jsd
  65. date
  66.         日期：Mon Sep 13 2021 12:28:47 GMT+0800 (GMT+08:00)
  68. export default printObj(ar);

深入理解TypeScript#自定义metadataKey

  1. function classDecorator(): ClassDecorator {
  2.   return target => {
  3.     // 在类上定义元数据，key 为 `classMetaData`，value 为 `a`
  4.     Reflect.defineMetadata('classMetaData', 'a', target);
  5.   };
  6. }
  8. function methodDecorator(): MethodDecorator {
  9.   return (target, key, descriptor) => {
  10.     // 在类的原型属性 'someMethod' 上定义元数据，key 为 `methodMetaData`，value 为 `b`
  11.     Reflect.defineMetadata('methodMetaData', 'b', target, key);
  12.   };
  13. }
  15. @classDecorator()
  16. class SomeClass {
  17.   @methodDecorator()
  18.   someMethod() {}
  19. }
  21. Reflect.getMetadata('classMetaData', SomeClass); // 'a'
  22. Reflect.getMetadata('methodMetaData', new SomeClass(), 'someMethod'); // 'b'

class-validator和class-transformer库

前者是做校验的，后者是将一个平面对象(通过一对大括号书写的对象，ajax得到的就是)转为一个类的对象

  1. import "reflect-metadata";
  2. import { IsNotEmpty, Max, MaxLength, Min, MinLength, validate } from "class-validator";
  4. class RegUser {
  5.     @IsNotEmpty({message: '账号不可为空'})
  6.     @MinLength(5, {message: '账号至少5个字符'})
  7.     @MaxLength(12, {message: '账号最多12个字符'})
  8.     loginId: string
  10.     loginPwd: string
  12.     @Min(0, {message: '年龄的最小值是0'})
  13.     @Max(100, {message: '年龄的最大值是100'})
  14.     age: number
  15.     gender: '男' | '女'
  16. }
  18. const post = new RegUser()
  19. post.loginId = '777'
  20. post.age = -1
  21. validate(post).then(errors => {
  22.     console.log(errors)
  23. })
  1. import "reflect-metadata";
  2. // import { IsNotEmpty, Max, MaxLength, Min, MinLength, validate } from "class-validator";
  3. import { plainToClass, Type } from "class-transformer"
  4. import axios from 'axios'
  6. class User {
  7.     id: number
  8.     firstName: string
  9.     lastName: string
  11.     @Type(() => Number)//表示在运行态的时候, age会转换为number类型
  12.     age: number
  14.     getName(){
  15.         return this.firstName + ' ' + this.lastName
  16.     }
  18.     isAdult(){
  19.         return this.age > 36 && this.age < 60
  20.     }
  21. }
  23. axios.get('https://api.jsonserve.com/aYbEix').then(resp => resp.data, error => {
  24.     console.log(error)
  25. })
  26.     .then((users: User[]) => {
  27.         const us = plainToClass(User, users)
  28.         for(const u of us){
  29.             console.log(u.getName(), typeof u.age, u.age)
  30.         }
  31.     })

装饰器补充

参数装饰器

依赖注入/依赖倒置

要求有三个参数：

  1. 如果方法是静态的，则为类本身；如果方法是实例方法，则为类的原型
  2. 方法名称
  3. 在参数列表中的索引（这是所修饰的第几个方法） ```typescript class MyMath { sum(a: number, @test b: number){
    1.  return a+b
    } }

function test(target: any, method: string, index: number){ console.log(target, method, index) } // MyMath {} sum 1

  1. <a name="G3wwO"></a>
  2. ## TS自动注入的元数据
  3. **如果安装了 refelct-metadata，并且导入了该库，并在某个成员上添加了元数据，并且启用了配置emitDecoratorMetadata，则TS在编译结果中会将约束的类型作为元数据加入到相应位置**
  5. **这样一来，TS的类型检查（约束）将有机会在运行时进行！**
  6. ```typescript
  7. class User {
  8.     @Reflect.metadata("a", '账号id')
  9.     loginId: string
  11.     @Reflect.metadata("a", '用户年龄')
  12.     age: number
  13. }
  14. const u = new User()
  15. console.log(Reflect.getMetadata('a', u, 'loginId'))//账号id
  16. console.log(Reflect.getMetadata('design:type', u, 'loginId'))//[Function: String]
  18. //编译结果如下:
  19. class User {
  20. }
  21. __decorate([
  22.     Reflect.metadata("a", '账号id'),
  23.     __metadata("design:type", String)
  24. ], User.prototype, "loginId", void 0);
  25. __decorate([
  26.     Reflect.metadata("a", '用户年龄'),
  27.     __metadata("design:type", Number)
  28. ], User.prototype, "age", void 0);
  29. const u = new User();
  30. console.log(Reflect.getMetadata('a', u, 'loginId'));

面向对象设计模式之AOP

AOP: aspect oriented programming

将一些在业务中共同出现的功能块，横向切分，以达到分离关注点的目的

比如：要提交数据，但是此前要数据要先通过校验，所以应该把校验功能抽离出去