Sometimes, you need to perform some operations on classes or methods, but you don’t want to change the original code structure, you can try to add decorators
Multiple decorators can be used to modify the same class, method,,,
Decorator format (method + @methodname)
First define a method as a decorator, and then refer to the decorator where you need to use it, refer to the method: @method name
Decorator classification
Decorators are: class decorator, method decorator, parameter decorator, property decorator
typescript type:
class decorator - - - ClassDecorator
method decorator - - - MethodDecorator
parameter decorator - - - ParameterDecorator
property decorator - - - PropertyDecorator
Class Decorator - - - ClassDecorator
Receive a parameter, class function
Format:
// 类装饰器 - - - ClassDecorator
const 装饰器名:ClassDecorator = (target) => {
}
@装饰器名
class 类名 {
}
Code example:
const TestClassDecorator:ClassDecorator = (target) => {
target.prototype.name = '史迪仔'
target.prototype.fn = () => {
console.log('今天也是元气满满的一天~');
}
}
const Start:ClassDecorator = (target) => {
target.prototype.start = () => {
console.log('早上好，新的一天开始啦~');
}
}
const End:ClassDecorator = (target) => {
target.prototype.end = () => {
console.log('一天结束啦，晚安，好梦~');
}
}
@Start
@TestClassDecorator
@End
class Test {
}
const t = new Test() as any
t.start()
console.log(t.name);
t.fn();
t.end()
Print result:
Method Decorator - - - MethodDecorator
Receive three parameters: class function, method name, member attribute descriptor
Format:
// 方法装饰器 - - - MethodDecorator
const 装饰器名:MethodDecorator = (target, propertyKey, descriptor) => {
}
class 类名 {
@装饰器名
方法名() {
}
}
Code example:
const Test:MethodDecorator = (target, key, des) => {
console.log(target, key, des);
console.log('我是一个方法装饰器');
}
class Student {
@Test
getData() {
}
}
const s = new Student()
s.getData();
Print result:
Parameter Decorator - - - ParameterDecorator
Receive three parameters: the constructor of the class, the method name, and the position index value of the parameter in the method parameter
Format:
// 参数装饰器 - - - ParameterDecorator
const 装饰器名:ParameterDecorator = (target: any, propertyKey: string, paramIndex: number) => {
}
class 类名 {
方法名(@装饰器名 参数名) {
}
}
Property Decorator - - - PropertyDecorator
Receives two parameters: the constructor of the class, the property name
Format:
// 属性装饰器 - - - PropertyDecorator
const 装饰器名:PropertyDecorator = (target: Object, propertyKey: string) => {
}
class 类名 {
@装饰器名
属性名：属性类型 = 属性值
}
decorator factory
Sometimes, you want to pass parameters to the decorator and perform some operations based on the parameters passed in. You can try the decorator factory (define a function that can receive parameters, and then return the decorator inside the function)
Format:
const 方法名 = (参数名) => {
const 装饰器名:ClassDecorator = (target) => {
// 一些操作
}
return fn装饰器名
}
@方法名('参数值')
class 类名 {
}
Code example:
const Base = (val) => {
const fn:ClassDecorator = (target) => {
target.prototype.name = val
target.prototype.like = '吃竹子'
target.prototype.say = () => {
console.log('请叫我果赖~');
}
}
return fn
}
@Base('花花')
class Animal {
}
const a = new Animal() as any
console.log(a.name);
console.log(a.like);
a.say();
Print result:
