一文搞懂typescript的装饰器

水痕001
237 阅读5分钟

装饰器是一种特殊类型的声明，它能够附加到类、类的函数、类属性、类函数的参数上，以达到修改类的行为

一、装饰器的种类

  • 1、根据装饰器的位置

    • 类装饰器
    • 类函数装饰器
    • 类属性装饰器
    • 类函数参数装饰器

  • 2、根据装饰器是否有参数

    • 无参装饰器(一般装饰器)
    • 有参装饰器(装饰器工厂)

二、类的装饰器

  • 1、类装饰器的写法

    function desc(target) {
  console.log('---------------类的装饰器参数 start------------------');
  console.log(target); // 输出 [Function: Person]表示当前装饰的类
  console.log('---------------类的装饰器参数 end------------------');
}

@desc // 使用装饰器
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let p = new Person('哈哈', 20);

  • 2、使用类的装饰器扩展类的属性和方法

    function desc(target) {
  console.log('---------------类的装饰器参数 start------------------');
  console.log(target);
  console.log('---------------类的装饰器参数 end------------------');
  return class extends target{ // 在react高阶组件中经常看到这种写法
    gender = '男';
    say() {
      console.log(this.name, this.age, this.gender);
    }
  }
}

@desc
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let p = new Person('哈哈', 20);
console.log(p);
p.say();

/*
---------------类的装饰器参数 start------------------
[Function: Person]
---------------类的装饰器参数 end------------------
class_1 { name: '哈哈', age: 20, gender: '男' }
哈哈 20 男
*/

  • 3、使用装饰器修改类的构造函数(构造函数的重载、方法重载)

    function desc(target) {
  return class extends target{
    name = '我是重载后的';
    sayHell() {
      console.log('我是重载后的', this.name);
    }
  }
}

@desc
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor() {
    this.name = '哈哈';
    this.age = 20;
  }

  sayHell() {
    console.log('hello word', this.name);
  }
}

let p = new Person();
console.log(p);
p.sayHell();

  • 4、装饰器工厂的写法

    function desc(params: string) {
  return function (targe: any) {
    console.log('---------------参数说明 start------------------');
    console.log('params', params);
    console.log('target', targe);
    console.log('---------------参数说明 end------------------');
    // 直接在原型上扩展一个属性
    targe.prototype.apiUrl = params;
  }
}

@desc('http://www.baidu.com')
class P {
  say() {
    console.log('说话')
  }
}

let p:any = new P();
console.log(p.apiUrl);

三、类函数装饰器

它应用到方法上，可以用来监视、修改、替换该方法

  • 1、定义方式

    function desc(target, key, descriptor) {
  console.log('---------------类的装饰器参数 start------------------');
  console.log('target', target); // Person { say: [Function] } 表示类的原型
  console.log('key', key); // 被装饰的函数名
  console.log('descriptor', descriptor); // 被装饰的函数的对象属性
  console.log('---------------类的装饰器参数 end------------------');
}

  • 2、使用

    class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  @desc
  say() {
    console.log('说的方法')
  }
}

  • 3、在装饰器中添加类的原型属性和原型方法

    function desc(target, key, descriptor) {
  target.gender = '男';
  target.foo = function () {
    console.log('我是原型上的方法')
  }
}

// 测试代码
let p = new Person('哈哈', 20);
console.log(p);
console.log(Person.prototype);
p.say();
console.log(p.gender); // 使用p原型链上的属性
p.foo() // 调用了p原型链上的方法

  • 4、使用装饰器拦截函数的调用(替换)

    function desc(params: string) {
  return function (target: any, key: string, descriptor: {[propsName: string]: any}) {
    // 修改被装饰的函数的
    let method = descriptor.value;
    descriptor.value = function (...args: Array<any>) {
      args = args.map(it => String(it));
      console.log(args);
      // method.apply(this, args);
    }
  }
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  @desc('装饰器上的参数')
  say() {
    console.log('说的方法')
  }
}


let p = new Person('哈哈', 20);
console.log(p);
p.say(123, 23, '你好');

  • 5、使用装饰器拦截函数的调用(附加新的功能)

    function desc(params: string) {
  return function (target: any, key: string, descriptor: {[propsName: string]: any}) {
    // 修改被装饰的函数的
    let method = descriptor.value;
    descriptor.value = function (...args: Array<any>) {
      args = args.map(it => String(it));
      console.log(args);
      method.apply(this, args);
    }
  }
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  @desc('装饰器上的参数')
  say(...args) {
    console.log('说的方法', args)
  }
}


let p = new Person('哈哈', 20);
console.log(p);
p.say(123, 23, '你好');

四、类属性装饰器

  • 1、定义方式

    function desc(target, name) {
  console.log('---------------类属性装饰器的参数 start------------------');
  console.log('target', target, target.constructor); // 表示类的原型
  console.log('name', name); // 表示被装饰属性名
  console.log('---------------类属性装饰器的参数 end------------------');
}


class Person {
  public name: string | undefined;
  public age: number | 0;

  @desc
  private gender: string | undefined;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let p = new Person('哈哈', 20);
console.log(p);

  • 2、在装饰器中修改属性值

    function desc(target, name) {
  target[name] = '女';
}


class Person {
  public name: string | undefined;
  public age: number | 0;

  @desc
  public gender: string | undefined;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say() {
    console.log(this.name, this.age, this.gender);
  }
}

let p = new Person('哈哈', 20);
console.log(p);
p.say();

五、类函数参数的装饰器

参数装饰器表达式会在运行时候当做函数被调用，以使用参数装饰器为类的原型上附加一些元数据

  • 1、使用方式

    function desc(params: string) {
  return function (target: any, key, index) {
    console.log('---------------参数装饰器 start------------------');
    console.log(target); // 类的原型
    console.log(key); // 被装饰的名字
    console.log(index); // 序列化
    console.log('---------------参数装饰器 end------------------');
  } 
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say(@desc('参数装饰器') age: number) {
    console.log('说的方法')
  }
}

let p = new Person('哈哈', 20);
console.log(p);
p.say(20);

  • 2、为类的原型上添加一些东西

    function desc(params: string) {
  return function (target: any, key, index) {
    console.log('---------------参数装饰器 start------------------');
    console.log(target); // 类的原型
    console.log(key); // 被装饰的名字
    console.log(index); // 序列化
    target.message = params;
    console.log('---------------参数装饰器 end------------------');
  } 
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say(@desc('参数装饰器') age: number) {
    console.log('说的方法')
  }
}


let p: any = new Person('哈哈', 20);
console.log(p);
p.say(20);
console.log(p.message)

六、几种装饰器的执行顺序

  • 1、测试代码

    function logCls(params: string) {
  return function (target: any) {
    console.log('4.类的装饰器');
  }
}

function logMehod(params: string) {
  return function (target: any, key: string, descriptor: {[propsName: string]: any}) {
    console.log('3.类的函数装饰器');
  }
}

function logParams(params: string) {
  return function (target: any, name: string) {
    console.log('1.类属性装饰器');
  }
}

function logQuery(params: string) {
  return function (target: any, key: string, index: number) {
    console.log('2.函数参数装饰器');
  }
}

@logCls('类的装饰器')
class Person{
  @logParams('属性装饰器')
  public name: string | undefined;

  @logMehod('函数装饰器')
  getData(@logQuery('函数参数装饰器') age: number, @logQuery('函数参数装饰器') gender: string) {
    console.log('----');
  }
}

  • 2、运行结果

    1.类属性装饰器
2.函数参数装饰器
3.类的函数装饰器
4.类的装饰器
avatar
文章
阅读
粉丝