TypeScript装饰器的作用、结构、类型及其应用场景（代码示例）

@Base
class Http {

}

// 类装饰器：可以不修改类本身的情况下，给类添加属性和方法等，参数 target 是类的构造函数
const Base: ClassDecorator = (target) => {
    console.log(target);
    target.prototype.xiaoman = 'xiaoman';
    target.prototype.fn = () => {
        console.log('111111111');
    }
}

@Base
class Http {

}

const http = new Http() as any;
http.fn();

// 装饰器工厂：利用闭包进行传参，因为原本默认的参数是 target 所以要再封装一层
import axios from 'axios'
namespace d2 {
    const Base = (name: string) => {
        const fn: ClassDecorator = (target) => {
            // console.log(target);
            target.prototype.name = name;
        }

        return fn;
    }


    @Base('mike')
    class Http {
     
    }

    const http = new Http() as any;

    console.log(http.name);
    
}

const Get = (url: string) => {
    const fn: MethodDecorator = (target, key, descriptor) => {
        console.log(target, key, descriptor);
    }

    return fn;
}
class Http {
    @Get('../data.json')
    getList(data: any) {
        console.log(data);
    }
}

const Get = (url: string) => {
    const fn: MethodDecorator = (target, key, descriptor: PropertyDescriptor) => {
        axios.get(url).then((res: any)=> {
            descriptor.value(res.data);     // descriptor.value 的值就是修饰的方法 getList
        })
    }

    return fn;
}

class Http {
    @Get('http://localhost:3000/data.json')
    getList(data: any) {
        console.log(data);
    }
}

const Param: ParameterDecorator = (target, key, index) => {
    console.log(target, key, index);
}

class Http {
    getList(@Param data: any) {
        console.log(data);
    }
}

const AgeDec: PropertyDecorator = (target, propertyKey) => {
    console.log(target, propertyKey);
}
class Http {
    @AgeDec
    age: number;
    constructor() {
        this.age = 20;
    }
}