装饰器

1. 类的装饰器

export default {};

/* function testDecorator(constructor: any) {
  constructor.prototype.uname = "张予曦";
  constructor.prototype.show = ():void => {
    console.log(`我是${constructor.prototype.uname}`);
    
  }
}


@testDecorator
class Person {

}

let p = new Person();
(p as any).show(); */

// 工厂函数
/* function testDecorator(flag: boolean) {
  if(flag) {
    return function (constructor: any) {
      constructor.prototype.uname = "张予曦";
      constructor.prototype.show = (): void => {
        console.log(`我是${constructor.prototype.uname}`);
      };
    };
  }else {
    return function(constructor: any) {}
  }
}

@testDecorator(true)
class Person {}

let p = new Person();
// (p as any).show(); */

// T 就相当于一个类
// 函数可以接收很多的参数, 参数的类型都是any类型, 最后把这些都放在了数组中
/* function testDecorator<T extends new(...args: any[]) => {}>(constructor: T) {
  // 直接对 constructor 进行扩展
  return class extends constructor {
    name = "章若楠";
    age = 18;
    show() {
      console.log(this.name, "xxxxxxxxxxxxxxxxxxxx");
      
    }
  }
}

@testDecorator
class Person {
  name: string;
  constructor(name: string) {
    this.name = name
  }
}


let p = new Person("陈意涵");
console.log(p);
(p as any).show() */

// 工厂函数
function testDecorator() {
  return function <T extends new (...args: any[]) => {}>(constructor: T) {
    return class extends constructor {
      name = "章若楠";
      age = 18;
      show() {
        console.log(this.name, "xxxxxxxxxxxxxxxxxxxx");
      }
    };
  };
}

const Person = testDecorator()(
  class {
    name: string;
    constructor(name: string) {
      this.name = name;
    }
  }
);
// class Person {
//   name: string;
//   constructor(name: string) {
//     this.name = name;
//   }
// }

let p = new Person("陈意涵");
console.log(p.name);
p.show();

2. 方法的装饰器

export default {};

// 普通方法： target对应的就是 prototype
// 静态方法:  target对应的就是 类的构造函数
function getNameDecorator(
  target: any,
  key: string,
  desciptor: PropertyDescriptor
) {
  // console.log(target);
  // console.log(key);
  // console.log(desciptor);

  // desciptor.writable = false;

  desciptor.value = function () {
    return "descrator";
  };
}

class Test {
  name: string = "郑合惠子";
  constructor(name: string) {
    this.name = name;
  }
  @getNameDecorator
  getName() {
    return this.name;
  }
  // @getNameDecorator
  static show(): void {
    console.log("Hello Show");
  }
}

let t = new Test("aaa");
// t.getName = () => {
//   return "Hello 张雪迎"
// }
console.log(t.getName());

3. 访问器的装饰器

export default {};

function visitDecorator(
  target: any,
  key: string,
  descritor: PropertyDescriptor
) {
  // console.log(target);
  // console.log(key);
  // console.log(descritor);
  descritor.writable = false;
}

class Test {
  private _name: string;
  constructor(name: string) {
    this._name = name;
  }
  @visitDecorator
  get name() {
    // console.log("get");

    return this._name;
  }

  set name(newName: string) {
    // console.log('set');

    this._name = newName;
  }
}

const t = new Test("周雨彤");
// t.name = "钟楚曦"
console.log(t.name);

4. 属性装饰器

export default {};

/* function nameDecorator(target: any, key: string) {
  console.log(target);
  console.log(key);
  
}

class Test {
  @nameDecorator
  uname = "任敏"
}

let t = new Test()
t.uname = "周洁琼"
console.log(t.uname); */

function nameDecorator(target: any, key: string): any {
  // console.log(target);
  // console.log(key);

  // const descriptor: PropertyDescriptor = {
  //   writable: false
  // }
  // return descriptor;

  // 修改的并不是实例上的uname, 而是原型上的uname
  target[key] = "秦岚";
}

class Test {
  @nameDecorator
  // 这个uname是放在实例上面的
  uname = "任敏";
}

let t = new Test();
// t.uname = "周洁琼"
console.log(t.uname);
console.log((t as any).__proto__.uname);

5. 参数的装饰器

// export default {}

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

class Test {
  getInfo(name: string, @paramDecorator age: number) {
    console.log(name, age);
  }
}

let t = new Test();
t.getInfo("安悦溪", 18);

6. 小例子

export default {};

/* const userInfo: any = undefined;

class Test {
  getName() {
    try{
      return userInfo.name
    }catch(e) {
      console.log(e);
      
    }
  }

  getAge() {
    try{
      return userInfo.age
    }catch(e) {
      console.log(e);
      
    }
  }
}

const t = new Test()
t.getName()
t.getAge() */

/* 
const userInfo: any = undefined;

function catchErrorDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
  const fn = descriptor.value
  descriptor.value = function() {
    try{
      fn()
    }catch(e) {
      console.log("userInfo上面不存在该属性");
      
    }
  }
}

class Test {
  @catchErrorDecorator
  getName() {
    return userInfo.name
  }
  @catchErrorDecorator
  getAge() {
    return userInfo.age
  }
}

const t = new Test()
t.getName()
t.getAge() */

const userInfo: any = undefined;

function catchErrorDecorator(msg: string) {
  return function (target: any, key: string, descriptor: PropertyDescriptor) {
    const fn = descriptor.value;
    descriptor.value = function () {
      try {
        fn();
      } catch (e) {
        console.log(msg);
      }
    };
  };
}

class Test {
  @catchErrorDecorator("userInfo.name 不存在")
  getName() {
    return userInfo.name;
  }
  @catchErrorDecorator("userInfo.age 不存在")
  getAge() {
    return userInfo.age;
  }
}

const t = new Test();
t.getName();
t.getAge();