ts之装饰器 Decorator

ts之装饰器 Decorator

// 对修饰器的实验支持功能在将来的版本中可能更改。在 “tsconfig” 或 “jsconfig” 中设置 “experimentalDecorators” 选项以删除此警告
// “experimentalDecorators”: true,

01：ts之 类的装饰器

const Watcher: ClassDecorator = (target: Function) => {
    
    
  console.log("target", target);
  target.prototype.getName = <T>(name: T): T => {
    
    
    return name;
  };
};

// 对修饰器的实验支持功能在将来的版本中可能更改。在 "tsconfig" 或 "jsconfig" 中设置 "experimentalDecorators" 选项以删除此警告
// "experimentalDecorators": true,
@Watcher
class A {
    
    }
let a1 = new A();
let res = (<any>a1).getName('我是菜鸡');
console.log('res',res); // res 我是菜鸡

02：简单的装饰器 之装饰器传递参数

// 02：简单的装饰器 之装饰器传递参数
const Watcher = (age: number): ClassDecorator => {
    
    
  console.log("age", age); // age 20

  return (target: Function) => {
    
    
    target.prototype.getName = <T>(name: T): T => {
    
    
      return name;
    };
    target.prototype.getAge = () => {
    
    
      return age;
    };
  };
};

@Watcher(20)
class A {
    
    }
let a1 = new A();
let res = (<any>a1).getName("我是菜鸡");
console.log("res", res); // res 我是菜鸡

03：简单的装饰器 之多个装饰器

const Watcher = (age: number): ClassDecorator => {
    
    
  console.log("age", age); // age 20

  return (target: Function) => {
    
    
    target.prototype.getName = <T>(name: T): T => {
    
    
      return name;
    };
    target.prototype.getAge = () => {
    
    
      return age;
    };
  };
};
const Log: ClassDecorator = (target: Function): void => {
    
    
  target.prototype.log = 111;
};

const Log2 = (): ClassDecorator => {
    
    
  return (target: Function) => {
    
    
    target.prototype.getLog = <T>(log: T): T => {
    
    
      return log;
    };
  };
};

@Log2()
// @Log
@Watcher(20) @Log
class A {
    
    }
let a1 = new A();
let res = (<any>a1).getName("我是菜鸡");
console.log("res", res); // res 我是菜鸡
let resLog = (<any>a1).getLog("我是log");
console.log("resLog", resLog); // resLog 我是log

04：简单的装饰器 之 属性装饰器

const Log: PropertyDecorator = (...args) => {
    
    
  console.log("args", args);
  // args [
  //   {},
  //   'getName',
  //   {
    
    
  //     value: [Function: getName],
  //     writable: true,
  //     enumerable: false,
  //     configurable: true
  //   }
  // ]
};

class A {
    
    
  name: string;
  constructor(name: string) {
    
    
    this.name = name;
  }
  @Log
  getName() {
    
    
    return this.name + "————";
  }
}
let aa = new A("我是AA");
console.log("name", aa.name); // name 我是AA
console.log("nagetNameme", aa.getName()); // nagetNameme 我是AA————

// 04：简单的装饰器 之 参数装饰器
const Log: ParameterDecorator = (...args) => {
    
    
  console.log("args", args);
};

class A {
    
    
  name: string;
  getName(@Log name: string) {
    
    
    return name + "————";
  }
  constructor(name: string) {
    
    
    this.name = name;
  }
  // getName(@Log name: string) {
    
    
  //   return this.name + "————";
  // }
}
let aa = new A("我是AA");
console.log("name", aa.name); // name 我是AA
console.log("nagetNameme", aa.getName("aaa")); // nagetNameme 我是aaa————

05:简单的装饰器 之 方法装饰器

const showMan: MethodDecorator = (
  target: any,
  propertyKey: string | symbol,
  descriptor: PropertyDescriptor
) => {
    
    
  // target [class User] propertyKey show
  console.log("target", target, "propertyKey", propertyKey);
  target.age = 20;
  descriptor.value = () => {
    
    
    console.log("caiji");
    console.log("target_age_", target); // target_age_ { age: 20 }
    // return target.age;
  };
  descriptor.writable = false;
};
class User {
    
    
  name: string;
  // 方法装饰器：如果是修饰普通方法，则args[0]是原型对象，如果修饰的是静态方法，则args[0]是构造函数
  @showMan
  public show() {
    
    
    console.log("我是菜鸡");
  }
  constructor(name: string) {
    
    
    this.name = name;
  }
}
let user = new User("方法装饰器");
console.log("user", user); // user User { name: '方法装饰器' }
user.show(); // caiji
// console.log("user2", user); // user User { name: '方法装饰器' }