TypeScript装饰器(Decorator)

一、装饰器(Decorator)

• 装饰器：就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
• 常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器
• 装饰器的写法：普通装饰器（无法传参） 、 装饰器工厂（可传参）
• 装饰器是过去几年中js最大的成就之一，已是Es7的标准特性之一

二、类装饰器（无法参数）

类装饰器在类声明之前被声明（紧靠着类声明）。
类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 传入一个参数

function fun( target:any ){

    target.prototype.userName = '李四';

}

@fun
class Person{

}
let person = new Person();
//@ts-ignore
console.log( person.userName );

三、装饰器工厂（可传参）

function fun1(  options:any  ){
    return ( target:any )=>{
        target.userName = options.name;
        target.prototype.age = options.age;
    }
}
@fun1({
    name:'李四',
    age:18
})
class Obj1{ 

}
let obj1 = new Obj1();
//@ts-ignore
console.log( Obj1.userName, obj1.name , obj1.age );

四、装饰器组合

结合起来一起使用的时候, 会先 从上至下 的执行所有的装饰器工厂, 拿到所有真正的装饰器, 然后再 从下至上 的执行所有的装饰器：

function demo1( target:any ){
    console.log('demo1')
}
function demo2(  ){
    console.log('demo2')
    return ( target:any )=>{
        console.log('demo2里面')
    }
}
function demo3( ){
    console.log('demo3')
    return ( target:any )=>{
        console.log('demo3里面')
    }
}
function demo4( target:any ){
    console.log('demo4')
}

@demo1
@demo2()
@demo3()
@demo4
class Person{

}

/*结果是：
demo2
demo3
demo4
demo3里面
demo2里面
demo1
*/

五、属性装饰器

function fun3( arg:any ){
    return ( target:any , attr:any )=>{
        target[attr] = arg;
    }
}

class Obj3{
    @fun3('张三')
    //@ts-ignore
    userName:string
}   
let obj3 = new Obj3();
console.log( obj3.userName );

六、方法装饰器

function test( target: any, propertyKey: string, descriptor: PropertyDescriptor ) {
    console.log( target );
    console.log( propertyKey );
    console.log( descriptor );
}

class Person {
    @test
    sayName() {
        console.log( 'say name...' )
       return 'say name...';
    }
}

let p = new Person();
p.sayName()