什么是装饰器?

• Decorator装饰器用来增强class的功能，装饰器是一种函数

• 会带来什么好处呢？

  • 会增加代码的可读性，使用起来方便，增加或修改类的功能

• 语法

  • @函数名

• 使用时报错的话

  • 可以在 tsconfig.json 进行配置

  • image.png

  • "compilerOptions": {
      "experimentalDecorators": true //是否启用装饰器特性
    }
    

装饰器

•   const watcher: ClassDecorator = (target: Function) => {
      // console.log(target) // [Function: Names]
      target.prototype.getName = <T>(name: T): T => {
        return name
      }
    }
  
    @watcher
    class Names {}
  
    @watcher
    class Ages {}
  
    let name1 = new Names()
    let age1 = new Ages()
  
    // 指定一下类型 断言的方式也可以
    // (name1 as any).getName();
    console.log((<any>name1).getName('瑞雯'))
    console.log((<any>age1).getName('亚索'))
  

装饰器工厂

•   const watcher = (name: string): ClassDecorator => {
      return (target: Function) => {
        target.prototype.getName = () => {
          return name
        }
      }
    }
  
    @watcher('亚索')
    class Names {}
  
    let name1 = new Names()
  
    console.log((<any>name1).getName())
  

装饰器组合

•   const watcher = (name: string): ClassDecorator => {
      return (target: Function) => {
        target.prototype.getName = () => {
          return name
        }
      }
    }
  
    const watcherAge: ClassDecorator = (target: Function) => {
      target.prototype.age = 12
    }
  
    @watcherAge
    @watcher('亚索')
    class Names {}
  
    let name1 = new Names()
    let res = `姓名:${(<any>name1).getName()}-- 年龄${(<any>name1).age}`
    console.log(res) // 姓名:亚索--- 年龄12
  

方法装饰器

•   const watcher: MethodDecorator | any = (...args: any[]) => {
      console.log(args)
      // [
      //   { getName: [Function (anonymous)] },
      //   'getName',
      //   {
      //     value: [Function (anonymous)],
      //     writable: true,
      //     enumerable: true,
      //     configurable: true
      //   }
      // ]
    }
  
    class Names {
      name: string
  
      @watcher
      getName() {}
    }
  
    let nam1 = new Names()
  

• 参数详解
  • 返回三个参数
    1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
    2. .成员的名字
    3. 成员的属性描述符

属性装饰器

•   const watcher: PropertyDecorator = (...args) => {
      console.log(args) // [ {}, 'name', undefined ]
    }
  
    class Names {
      @watcher
      name: string
    }
  
    let nam1 = new Names()
  

• 参数详解
  • 两个参数
    1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
    2. 属性的名字。

参数装饰器

•   const watcher: ParameterDecorator = (...args) => {
      console.log(args)
      // [ { getName: [Function (anonymous)] }, 'getName', 0 ]
      //     方法                                 方法名  位置
    }
  
    class Names {
      name: string
  
      getName(name: string, @watcher age: number) {}
    }
  
    let nam1 = new Names()
  

• 参数详解
  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 参数在函数参数列表中的索引。