TS装饰器

装饰器是一种特殊类型的声明，可以被附加到类生命、方法、访问符、属性或参数上，可以修改类的行为。
使用@expression这种形式，后接函数，在运行时被调用，被装饰的声明信息作为参数传入。

例如：

@Path('/hello')
class HelloSrv {}

在tsconfig中要开启
 { "compilerOptions": {
    "experimentalDecorators" : true
}}

---

1. 类装饰器

function Path(path: string) {
    return function (target: Function) {
        !target.prototype.$Meta && 
        (target.prototype.$Meta = {})
            target.prototype.$Meta.baseUrl = path;
    };
}

@Path('/hello')
class HelloService {
    constructor() {}
}

console.log(HelloService.prototype.$Meta);// { baseUrl: '/hello' }
let hello = new HelloService();
console.log(hello.$Meta) // { baseUrl: '/hello' }

---

2. 方法装饰器

应用到方法的属性描述符上，用来监视、修改或替换方法定义。

方法装饰会在运行时传入下列3个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
• 成员的名字。
• 成员的属性描述符。

function GET(url: string) {
    return function (target, methodName: string, descriptor: PropertyDescriptor) {
        !target.$Meta && (target.$Meta = {});
        target.$Meta[methodName] = url;
    }
}

class HelloService {
    constructor() { }
    @GET("xx")
    getUser() { }
}

console.log((<any>HelloService).$Meta);

如果VSCODE编辑报错“作为表达式调用，无法解析方法修饰器的签名”，要在tsconfig中添加
"target": "es6"

---

3. 方法参数修饰器
   参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
• 参数的名字。
• 参数在函数参数列表中的索引。

function PathParam(paramName: string) {
    return function (target, methodName: string, paramIndex: number) {
        !target.$Meta && (target.$Meta = {});
        target.$Meta[paramIndex] = paramName;
    }
}

class HelloService {
    constructor() { }
    getUser( @PathParam("userId") userId: string) { }
}

console.log((<any>HelloService).prototype.$Meta); // {'0':'userId'}

---

4. 属性装饰器
   属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

• 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
• 成员的名字。

function DefaultValue(value: string) {
    return function (target: any, propertyName: string) {
        target[propertyName] = value;
    }
}

class Hello {
    @DefaultValue("world") greeting: string;
}

console.log(new Hello().greeting);// 输出: world

---

装饰器加载顺序

function ClassDecorator() {
    return function (target) {
        console.log("I am class decorator");
    }
}
function MethodDecorator() {
    return function (target, methodName: string, descriptor: PropertyDescriptor) {
        console.log("I am method decorator");
    }
}
function Param1Decorator() {
    return function (target, methodName: string, paramIndex: number) {
        console.log("I am parameter1 decorator");
    }
}
function Param2Decorator() {
    return function (target, methodName: string, paramIndex: number) {
        console.log("I am parameter2 decorator");
    }
}
function PropertyDecorator() {
    return function (target, propertyName: string) {
        console.log("I am property decorator");
    }
}

@ClassDecorator()
class Hello {
    @PropertyDecorator()
    greeting: string;


    @MethodDecorator()
    greet( @Param1Decorator() p1: string, @Param2Decorator() p2: string) { }
}

输出

I am property decorator
I am parameter2 decorator
I am parameter1 decorator
I am method decorator
I am class decorator

属性装饰器 - 方法参数装饰器 - 方法装饰器 - 类装饰器

从上述例子得出如下结论：

1、有多个参数装饰器时：从最后一个参数依次向前执行

2、方法和方法参数中参数装饰器先执行。

3、类装饰器总是最后执行。

4、方法和属性装饰器，谁在前面谁先执行。因为参数属于方法一部分，所以参数会一直紧紧挨着方法执行。上述例子中属性和方法调换位置，输出如下结果：

I am parameter2 decorator
I am parameter1 decorator
I am method decorator
I am property decorator
I am class decorator

参考链接