TS 08 TS中的各类修饰器

TS装饰器

装饰器:装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。
通俗的讲装饰器就是一一个方法， 可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。
常见的装饰器有:类装饰器、属性装饰器、方法装饰器、参数装饰器
装饰器的写法:普通装饰器(无法传参)、装饰器工厂 (可传参)
装饰器是过去几年中js最大的成就之，已是Es7的标准特性之一

1.1 类装饰器

类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。

• 1.1.1 普通装饰器

/**
 * TS装饰器
 * 普通类装饰器（无法传参）
 * 类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
 */
//声明一个装饰器
function logClass(params:any) {

    // console.log(params)
    // 这里的params 就是当前类 HttpClient

    //这个时候我们就可以在修饰器中扩展当前类的属性和方法
    //扩展类
    params.prototype.apiUrl = 'xxxx';

    //扩展方法
    params.prototype.run = function():void{
        console.log("我是run方法");
    }
}


// 调用普通装饰器
@logClass


//声明一个类
class HttpClient {
    constructor() {

    }

    getData() {

    }
}

var p:any = new HttpClient();
console.log(p.apiUrl);
//xxxx

p.run();

• 1.1.2 装饰器工厂

/**
 * TS装饰器
 * 装饰器工厂（可传参）
 * 类装饰器:类装饰器在类声明之前被声明(紧靠着类声明)。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。
 */
//声明一个装饰器
// 这里的参数params 是装饰器传入的参数
function logClass(params:string) {

    //这里的target是当前类
    return function(target:any){
        // console.log(target);

        // console.log(params);

        target.prototype.apiUrl = params;
    }
    
}


// 调用普通装饰器
@logClass('http://www.baidu.com')


//声明一个类
class HttpClient {
    constructor() {

    }

    getData() {

    }
}

var http:any = new HttpClient();

console.log(http.apiUrl)

• 1.1.3 下面是一个重载构造函数的例子

/**
 * 下面是一个重载构造函数的例子 。
 * 类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。
 * 如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。
 */

function logClass(target:any){
    return class extends target {
        apiUrl:string = '我是修改后的数据';

        getData(){
            console.log(this.apiUrl)
        }
    }
}


@logClass
 class overLoad{
     public apiUrl:string | undefined;

     constructor(){
         this.apiUrl = '我是构造函数里面的apiurl'
     }

     getData(){
         console.log(this.apiUrl)
     }
 }

 var o = new overLoad();
 o.getData();
//  我是构造函数里面的apiurl

// 使用装饰器重载之后
// 我是修改后的数据

2.1 属性装饰器

属性装饰器
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数:
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。

/**
 * 2、属性装饰器
 * 属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数:
 * 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * 2、成员的名字。
 */


//定义属性装饰器
function logProperty(params:any){
    return function(target:any,attr:any){
        target[attr] = params;
    }
}



class Person {
    @logProperty('康家豪')
    name:string | undefined;

    constructor(){

    }

    getData(){
        console.log(this.name)
    }
}

var p = new Person();
p.getData();

3.1 方法装饰器

方法装饰器
它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。
方法装饰会在运行时传入下列3个参数:
1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2、成员的名字。
3、成员的属性插述符。

/**
 * 3、方法装饰器
 * 它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。
 * 方法装饰会在运行时传入下列3个参数:
 * 1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
 * 2、成员的名字。
 * 3、成员的属性插述符。
 */

//  方法装饰器  一
 function logMethods(params:any){
     return function(target:any,methodsName:any,desc:any){
         console.log(target)
         //{getData: ƒ, constructor: ƒ}
         console.log(methodsName)
         //getData
         console.log(desc)
         //{writable: true, enumerable: true, configurable: true, value: ƒ}


         //扩展属性
         target.apiUrl = 'xxx';
         target.run = function():void{
             console.log('run')
         }
     }
 }


 class Person {
    name:string | undefined;

    constructor(){

    }

    @logMethods('http://www.baidu.com')
    getData(){
        console.log(this.name)
    }
}


var p:any = new Person();
console.log(p.run());




//方法装饰器  二  修改方法
function logMethods(params:any){
    return function(target:any,methodsName:any,desc:any){
        console.log(target)
        //{getData: ƒ, constructor: ƒ}
        console.log(methodsName)
        //getData
        console.log(desc)
        //{writable: true, enumerable: true, configurable: true, value: ƒ}

        console.log(desc.value)

        //修改装饰器的方法：把装饰器方法传入的所有参数修改为string类型

        //1.保存当前的方法
        var oMethod = desc.value;

        //方法被替换了
        // desc.value = function(...args:any[]){
        //     args = args.map((item) => {
        //         return String(item)
        //     })

        //     console.log(args)
        // }

        //怎么修改当前方法呢？
        desc.value = function(...args:any[]){
            args = args.map((item) => {
                return String(item)
            })

            console.log(args)
            oMethod.apply(this.args);
        }
    }
}


class Person {
   name:string | undefined;

   constructor(){

   }

   @logMethods('http://www.baidu.com')
   getData(...args:any[]){
        console.log('我是原本的返回值')
   }
}


var p = new Person();
p.getData(123,123,123,123,1231);

4.1 各种装饰器的执行顺序

/**
 * 装饰器执行顺序
 * 结果：属性装饰器  >> 方法装饰器  >>  类装饰器
 * 同样的装饰器会先执行后面的装饰器
 */

function logClass(params:string){
    return function(target:any){
        console.log('类装饰器')
    }
}


function logAttr(params?:string){
    return function(target:any,attrName:any){
        console.log('属性装饰器')
    }
}

function logMethods(params:any){
    return function(target:any,methodsName:any,desc:any){
       console.log('方法装饰器')
    }
}



@logClass('类装饰器')
class Person {
    @logAttr('属性装饰器')
    name:string | undefined;
 
    constructor(){
 
    }
 
    @logMethods('方法装饰器')
    getData(){
         console.log('我是原本的返回值')
    }
 }