TypeScript入门笔记（五）

接上篇。

这篇主要记录TypeScript中的几种装饰器的概念与用法。装饰器（Decorators）：用一种特性标注的写法作为声明，能够给类，方法，属性扩展功能，可以简单地理解为是非侵入式的行为修改。分为：类装饰器、方法装饰器、属性装饰器、访问器装饰器、参数装饰器。

类装饰器

/**
 * 装饰器（Decorators）：用一种特性标注的写法作为声明，能够给类，方法，属性扩展功能，可以简单地理解为是非侵入式的行为修改
 * 分为：类装饰器、方法装饰器、属性装饰器、访问器装饰器、参数装饰器
 * 注：在tsconfig.json中将打开 “"experimentalDecorators": true” 以启用装饰器功能
 */

/* ****************************类装饰器******************************* */
//以下这个Person类使用了装饰器“yasuo”
//@yasuo
class Person {
    roleLine: string | undefined;

    constructor(readonly name: string, readonly birthDay: Date) {
        this.roleLine = "Hello everyone"
    }

    SayHi(): void {
        console.log(this.roleLine);
    }
}

/**
 * 装饰器其实也是一个方法，装饰器中可以做的事有三：
 * （1）做点自己想做的事
 * （2）扩展属性或者方法
 * （3）重载类的构造函数
 */

//参数target便代表Person类(的构造器)
function yasuo(target: any) {
    //（1）只要有类应用了这个装饰器，便会执行
    console.log("Follow the wind, but watch your back.")

    //（2）为Person类扩展一个Attach的方法
    target.prototype.Attack = function () {
        console.log("Hasaki!");
    }

    //（3）重载构造函数
    return class extends target {
        roleLine: any = "Make it quick."
    }
}
//这里指定为any类型是为了防止调用扩展方法Attack时TypeScript编译器报错
let hero: any = new Person("yasuo", new Date("2013-12-14"));

hero.SayHi();   // 控制台输出：Make it quick.
//hero.Attack()   // 控制台输出：Hasaki!


/* ****************************装饰器工厂****************************** */
// 带参数的装饰器
@skin("黑夜使者")
class Hero {
    roleLine: string | undefined;

    constructor(readonly name: string, readonly birthDay: Date) {
        this.roleLine = "welcome to LOL"
    }

    SayHi(): void {
        console.log(this.roleLine);
    }
}
//定义“装饰器工厂”
function skin(value: string) {      // 这是一个装饰器工厂
    return function (target: any) {      //  这是装饰器
        let line: string;
        switch (value) {
            case "黑夜使者":
                line = "我是变革之风"
                break;
            case "猩红之月":
                line = "Hasaki"
                break;
            default:
                line = "Attack"
                break;
        }

        target.prototype.Attack = function () {
            console.log(line);
        }
    }
}

let h1: any = new Hero("yasuo", new Date("2013-12-14"));
h1.Attack();    //控制台输出：我是变革之风

属性装饰器

/* ****************************属性装饰器****************************** */
// 属性装饰器接收两个参数
// 参数一：对于静态成员是构造器，对于实例成员是类的原型对象
// 参数二：属性的名称

class Hero {

    @lineInjection("Hasaki")    //使用装饰器为其赋值
    roleLine: string | undefined;

    constructor(readonly name: string, readonly birthDay: Date) {
    }

    SayHi(): void {
        console.log(this.roleLine);
    }
}

//定义一个属性装饰器
function lineInjection(line: string) {      //装饰器的参数
    return function (target: any, prop: any) {
        target[prop] = line;
    }
}

let h1 = new Hero("yasuo", new Date("2013-12-14"));
h1.SayHi();     //控制台输出：Hasaki

方法装饰器

/* ****************************方法装饰器****************************** */
// 用于监视，修改方法，接受3个参数
// 参数一：对于静态成员是构造器，对于实例成员是类的原型对象
// 参数二：方法的名称
// 参数三：方法的属性描述符，其中value属性就是当前方法的定义

class Person {
    constructor(public firstName: string, public lastName: string) { }

    @useFullName
    public SayHi(): void {
        console.log(`i am ${this.firstName}`);
    }
}

//定义一个方法装饰器，修改方法，让其输出全名
function useFullName(
    target: object,         //参数一：类的原型对象
    propertyName: string,   //参数二：成员的名称
    descriptor: PropertyDescriptor  //参数三：成员的描述信息
): void {

    //将改写前的原方法暂存下来
    const sayLastName: Function = descriptor.value;

    //改写方法
    descriptor.value = function () {
        //先调用一次原方法
        sayLastName.call(this);
        //再输出一次全名
        console.log(`${this.firstName} ${this.lastName}`)
    };
}

let mj = new Person("bond", "james");

mj.SayHi();     //控制台输出：i am bond
                //bond james

方法参数装饰器

/* ****************************方法参数装饰器****************************** */
// 可以用来监视方法传入的参数
// 和之前几个装饰器类似，接受的参数如下
// 参数一：对于静态成员是构造器，对于实例成员是类的原型对象
// 参数二：方法的名称
// 参数三：参数在方法中的位置（index）

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    greet(@log name: string) {
        return "Hello " + name + ", " + this.greeting;
    }
}

function log(
    target: Object,
    propertyKey: string,
    parameterIndex: number) {

    console.log(target);
    console.log(propertyKey);
    console.log(parameterIndex);
}

装饰器的执行顺序

如果一个对象中包含多个装饰器，如

@f
@g
class x

那么他的执行顺序是f(g(x))，先执行下面的装饰器后再执行上面的。

若多种装饰器共存是，其执行顺序是：属性装饰器 → 方法装饰器 → 方法参数装饰器 → 类装饰器。