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: '方法装饰器' }