typeScript装饰器

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

@description: 类装饰器

类装饰器在声明之前被声明（紧靠看类声明），类装饰器应用于类构造函数，可以用来监视，修改或替换类定义，传入一个参数。
重载构造函数
类装饰器表达式会在运行时当做函数被调用，类的构造函数作为其唯一的参数。
如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

@description: 属性装饰器

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

@description: 方法装饰器

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

@description: 方法参数装饰器

参数装饰器表达式会在运行时，当做函数被调用，可以使用参数装饰器为类的原型增加一些元素数据，传入下列3个参数
1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2. 方法的名字
3. 参数在函数参数列表中的索引

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

传入一个参数
//1.0 类装饰器 - 普通装饰器（不可传参）
function logClass(params: any) {
    // params就是当前类
    params.prototype.apiUrl = '动态扩展的属性!';
    params.prototype.run = () => {
        console.log('我是一个run方法!');
    }
}

// 调用
@logClass
class HttpClient {
    consturctor() {}
    getData() {
        console.log('我是类中的getData方法!');
    }
}

let http: any = new HttpClient();

console.log(http.apiUrl);
http.run();
http.getData();

// 2.0 类装饰器 - 装饰器工厂（可传参）

// 装饰器
function loggerClass(params: string) {
    // params传入的参数
    // target表示当前类
    return function (target: any) {
        target.prototype.title = params;
        target.prototype.run = () => {
            console.log('执行run方法!');
        }
    }
}

@loggerClass('天空很蓝!')
class HttpsClient {
    consturctor() {}
    getData() {

    }
}

let https: any = new HttpsClient();
console.log(https.title);

// 1. 重载构造函数
function seald(target: any) {
    // console.log(target);
    return class extends target {
        apiUrl: any = '我是修改后的数据';
        getData() {
            this.apiUrl = this.apiUrl + '------';
        }
    }
}

function sea(target: any) {
    target.prototype.val = '我是sea值';
}

@seald
@sea
class Hfunc {
    apiUrl: string | undefined;
    constructor() {
        this.apiUrl = "我是构造函数里面的apiUrl";
    }
    getData() {
        console.log(this.apiUrl);
    }
}

let hf: any = new Hfunc();
hf.getData();
console.log(hf.val);

属性装饰器

// 类装饰器
function logger(params: any) {
    return function (target: any) {

    }
}

// 属性装饰器
function loggerProperty(params: any) {
    // target - 原型对象
    // attr - 成员的名字
    return function (target: any, attr: any) {
        // 设置url的默认值
        target[attr] = params;
    }
}

@logger('http://www.baidu.com')
class GetInit {
    @loggerProperty('http://google.com')
    public url: any | undefined;
    public name: string | undefined;
    constructor() {
    }
    getInit() {
        // console.log(this.url);
    }
}
let g = new GetInit();
g.getInit();

方法装饰器，它会被应用到方法的属性描述符上，可以用来监视，修改或替换方法定义。

//  方法装饰器
function get(params: any) {
    return function (target: any, methods: any, desc: any) {

        // 扩展属性和方法
        target.apiUrl = 'yyyy';
        target.run = function(){
            console.log('我是run方法!');
        }

        // 修改装饰器的方法 把装饰器方法里面传入的所有参数改为string类型
        // 1. 保存当前的方法

        let oMethod = desc.value;

        // 强制转换数据类型
        desc.value = function(...args:any[]){
            args = args.map( item => {
                return String(item);
            });
            // 加上这句话是修改的意思 - 不写是直接替换
            oMethod.apply(this,args);

            // console.log(args);
        }
    }
}

class Kind {
    public greeting: any | undefined;
    constructor(greeting: string) {
        this.greeting = greeting
    }

    @get('http://xxxxx')
    greet() {
        // console.log('我是greet里面的方法!');
    }
}

let kind:any = new Kind("message");
console.log(kind.apiUrl);
kind.greet(123,'3333');

方法参数装饰器

function means(params:any){
    return function(target:any,methodsName:any,paramsIndex:any){
        console.log(params);
        console.log(target,methodsName,paramsIndex);

        target.apiUrl = params;

    }
}

class Mean {
    public url:any | undefined;
    constructor(){}
    greet(@means('uuid') uuid:any){
        console.log(uuid);
    }
}

let mune:any = new Mean();
mune.greet(123);
console.log(mune.apiUrl);