第四篇：TypeScript装饰器

第三篇的文章中，我们实现了简单的IoC容器，代码如下：

import 'reflect-metadata';

type Tag = string;
type Constructor<T = any> = new (...args: any[]) => T;
type BindValue = string | Function | Constructor<any>;

export function Injectable(constructor: Object) {

}

export class Container {
    private bindTags: any = {};
    public bind(tag: Tag, value: BindValue) {
        this.bindTags[tag] = value;
    }
    public get<T>(tag: Tag): T {
        const target = this.getTagValue(tag) as Constructor;
        const providers: BindValue[] = [];
        for(let i = 0; i < target.length; i++) {
            // 获取参数的名称
            const providerKey = Reflect.getMetadata(`design:paramtypes`, target)[i].name;
            // 把参数的名称作为Tag去取得对应的类
            const provider = this.getTagValue(providerKey);
            providers.push(provider);
        }
        return new target(...providers.map(p => new (p as Constructor)()))
    }
    private getTagValue(tag: Tag): BindValue {
        const target = this.bindTags[tag];
        if (!target) {
            throw new Error("Can not find the provider");
        }
        return target;
    }
}

import { Injectable } from "./container";

@Injectable
export class Hand {
    public hit() {
        console.log('Cust!');
        return 'Cut!';
    }
}
@Injectable
export class Mouth {
    public bite() {
        console.log('Hit!');
        return 'Hit!';
    }
}
@Injectable
export class Human {
    private hand: Hand;
    private mouth: Mouth;
    constructor(
        hand: Hand,
        mouth: Mouth
    ) {
        this.hand = hand;
        this.mouth = mouth;
    }
    public fight() {
        return this.hand.hit();
    }
    public sneak() {
        return this.mouth.bite();
    }
}

下面是怎么使用Ioc Container:

import 'reflect-metadata';

import { Container } from "./container";
import { Hand, Human, Mouth } from "./test-class";

const container = new Container();
container.bind('Hand', Hand);
container.bind('Mouth', Mouth);
container.bind('Human', Human);

const human = container.get<Human>('Human');

human.fight();
human.sneak();

 可以看到，bind方法使用的方式有点奇怪，我们使用装饰器来改造一下。

 

装饰器是一种特殊类型的声明，它能够被附件到类声明，方法，访问符，属性，或者参数上。

装饰器使用@expression这种形式，其中，expression必须是函数。

比如

function sealed(target) {
    // do something with "target" ...
}

 

如果想要给expression传递一些我们自定义的参数，则需要使用装饰器工厂函数，其实这个装饰器工厂函数就是返回装饰器函数的函数，比如：

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器
        // do something with "target" and "value"...
    }
}

 

 如果有多个装饰器应用在同一个声明上，比如

// 书写在同一行
@f @g x
// 书写在不同行
@f
@g
x

 

 在Typescript中，当多个装饰器应用在一个声明上时，会进行如下步骤的操作。

1. 由上至下依次对装饰器表达式求值。
2. 求值的结果会被当作装饰器函数，由下至上依次被调用。

function f() {
    console.log("f(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g() {
    console.log("g(): evaluated");
    return function (target, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C {
    @f()
    @g()
    method() {}
}

 

执行结果 

f(): evaluated
g(): evaluated
g(): called
f(): called

 

 即求值由上到下，调用由下到上。

那么，如果一个类中有多个装饰器装饰不同的声明，那么它的调用规则是怎么样子的？

 

类中不同声明上的装饰器将按以下规定的顺序应用：

1. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
2. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。
3. 参数装饰器应用到构造函数。
4. 类装饰器应用到类。

总的来说，从小到大（参数 ==》 方法 ==》 访问符 ==》 属性 ==》 构造函数 ==》 类），和多个装饰器应用到一个声明上的调用规则是一样的。

一.类装饰器

类装饰器应用在类声明前面，可以用来监控，修改，替换类定义。

类装饰器函数只有一个参数，就是这个类的构造函数。

需要特别这样的是，这里的构造函数不是constructor函数，而且构造整个类的函数，

比如下面这个类

class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

 

传递给装饰器函数的不是

    constructor(m: string) {
        this.hello = m;
    }

 

而是：

    function Greeter(m) {
        this.property = "property";
        this.hello = m;
    }

 

可以理解为就是把整个类传递给了装饰器函数。

 

类装饰器可以不返回值，这时对类定义进行修改。

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}
@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

 

如果类装饰器返回一个值，那么这个值将会被当作新的构造函数。

需要关注的是，返回的构造函数需要自己处理原型链。

 

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

@classDecorator
class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

console.log(new Greeter("world"));

 

 结果是：

class_1 {
  property: 'property',
  hello: 'override',
  newProperty: 'new property'
}

 

 可以看到，虽然在装饰器中，返回的构造函数extends了用来的构造函数，但是，hello属性的值还是被覆盖掉了。我们来看一下typescript编译成JavaScript的代码：

function classDecorator(constructor) {
    console.log(constructor);
    return /** @class */ (function (_super) {
        __extends(class_1, _super);
        function class_1() {
 　　　　　　　　// 这里，继承了原来的类
            var _this = _super !== null && _super.apply(this, arguments) || this;
　　　　　　　　　// 这里，新加了一些属性
            _this.newProperty = "new property";
　　　　　　　　// 这里，修改了一些属性
            _this.hello = "override";
　　　　　　　　// 因为继承了原来的类，使用类中的property属性还是在的
            return _this;
        }
        return class_1;
    }(constructor));
}
var Greeter = /** @class */ (function () {
　　　　　// 注意这里，传递给装饰器还是的就是整个类，不是普通意义上的构造函数。
    function Greeter(m) {
        this.property = "property";
        this.hello = m;
    }
    Greeter = __decorate([
        classDecorator,
        __metadata("design:paramtypes", [String])
    ], Greeter);
    return Greeter;
}());

 

二.方法装饰器

方法装饰器声明在一个方法的声明之前，它会被应用到方法的属性描述符上。

这里简单记录一下属性描述符：

• value：设置属性值，默认值为 undefined。
• writable：设置属性值是否可写，默认值为 true。
• enumerable：设置属性是否可枚举，即是否允许使用 for/in 语句或 Object.keys() 函数遍历访问，默认为 true。
• configurable：设置是否可设置属性特性，默认为 true。如果为 false，将无法删除该属性，不能够修改属性值，也不能修改属性的属性描述符。
• get：取值函数，默认为 undefined。
• set：存值函数，默认为 undefined。

方法装饰器函数有3个参数：

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

如果方法装饰器返回一个值，那么这个值会被当作成员的属性描述符。这给成员的定义提供了极大的灵活性。

下面是替换属性描述符的例子：

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

    @OtherGreet(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}
function OtherGreet(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log(target);
        return {
            ...descriptor,
            value: () => {
                return 'No Hello,' + target.greeting;
            }
        }
    };
}
const g = new Greeter('wt');
console.log(g.greet())

 

返回的值：

Greeter { greet: [Function] }
No Hello,undefined

 

这个例子有需要可以思考的地方，第一点，为什么target是Greeter { greet: [Function] }，而没有包含greeting. 这是因为，当方法构造器作用在实例成员上时，target是原型对象，而属性是直接作用在对象上的，只有方法是在原型对象上。

我们可以看一下TypeScript的class编译成js的结果：

var Greeter = /** @class */ (function () {
    function Greeter(message) {
        this.greeting = message;
    }
    // @OtherGreet(false)
    Greeter.prototype.greet = function () {
        return "Hello, " + this.greeting;
    };
    return Greeter;
}());

 

可以看到，只有greet方法在原型上。那么，我们怎么才能在方法构造器中访问到类中的其他属性成员呢？   我也不知道。。。。

这也是为什么出现undefined的原因。

三.访问器装饰器

访问器装饰器作用在一个访问器的声明之前，应用于访问器的属性描述符上

访问器装饰器有3个参数：

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

如果访问器装饰器返回一个值，它会被当作新的属性描述符来覆盖原来的属性描述符。

class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() { return this._x; }

    @configurable(false)
    get y() { return this._y; }
}
function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

 

四.属性装饰器

属性装饰器声明在一个属性声明之前。

属性装饰器有2个参数：

1. 对于静态成员来说是类的构造函数，对于实例成员来说是类的原型对象。
2. 成员的名称

注意：属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。 
因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且没办法监视或修改一个属性的初始化方法。返回值也会被忽略。
因此，属性描述符只能用来监视类中是否声明了某个名字的属性。

 

所以，使用属性装饰器时，一般配合元数据一起使用。

class Greeter {
    @format("Hello, %s")
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        let formatString = getFormat(this, "greeting");
        return formatString.replace("%s", this.greeting);
    }
}


function format(formatString: string) {
    return (target: any, propertyName: string) => {
        Reflect.defineMetadata('format', formatString, target, propertyName );
    }
}

function getFormat(target: any, propertyKey: string) {
    return Reflect.getMetadata('format', target, propertyKey);
}
const g = new Greeter('wt');
console.log(g.greet());

 

属性装饰器可以被用来附加一下信息（方法是使用Reflect API）,之后再使用API取得设置的信息。

五.参数装饰器

参数装饰器声明在一个参数声明之前，它可以应用于类的构造函数的参数列表或者方法的参数列表中。

参数装饰器有3个参数：

1. 对于静态成员来说，是类的构造函数，对于实例成员来说，是类的原型对象。
2. 成员的名字（不是参数名称，是函数名称）,当是构造函数中的参数时，为undefined，这是因为class被解析成匿名函数了。
3. 参数在函数参数列表中的索引（通过索引可以取得是函数中的哪个参数）

class Greeter {
    greeting: string;

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

    @validate
    greet(@required name: string) {
        return "Hello " + name + ", " + this.greeting;
    }
}
const requiredMetadataKey = Symbol("required");

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<any>) {
    let method = descriptor.value;
    descriptor.value = function () {
        let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
        if (requiredParameters) {
            for (let parameterIndex of requiredParameters) {
                if (parameterIndex >= arguments.length || arguments[parameterIndex] === undefined) {
                    throw new Error("Missing required argument.");
                }
            }
        }

        return method.apply(this, arguments);
    }
}

@required装饰器添加了元数据实体把参数标记为必需的。 @validate装饰器把greet方法包裹在一个函数里在调用原先的函数前验证函数参数。

使用

使用装饰器来bind容器

import 'reflect-metadata';

type Tag = string;
type Constructor<T = any> = new (...args: any[]) => T;
type BindValue = string | Function | Constructor<any>;

export class Container {
    public bindTags: any = {};
    public bind(tag: Tag, value: BindValue) {
        this.bindTags[tag] = value;
    }
    public get<T>(tag: Tag): T {
        const target = this.getTagValue(tag) as Constructor;
        const providers: BindValue[] = [];
        for(let i = 0; i < target.length; i++) {
            // 获取参数的名称
            const providerKey = Reflect.getMetadata(`design:paramtypes`, target)[i].name;
            // 把参数的名称作为Tag去取得对应的类
            const provider = this.getTagValue(providerKey);
            providers.push(provider);
        }
        return new target(...providers.map(p => new (p as Constructor)()))
    }
    private getTagValue(tag: Tag): BindValue {
        const target = this.bindTags[tag];
        if (!target) {
            throw new Error("Can not find the provider");
        }
        return target;
    }
}
export const Injectable = (constructor: Constructor) => {
    container.bind(constructor.name, constructor);
}
export const container = new Container();

import { Injectable } from "./container";

@Injectable
export class Hand {
    public hit() {
        console.log('Cust!');
        return 'Cut!';
    }
}
@Injectable
export class Mouth {
    public bite() {
        console.log('Hit!');
        return 'Hit!';
    }
}
@Injectable
export class Human {
    private hand: Hand;
    private mouth: Mouth;
    constructor(
        hand: Hand,
        mouth: Mouth
    ) {
        this.hand = hand;
        this.mouth = mouth;
    }
    public fight() {
        return this.hand.hit();
    }
    public sneak() {
        return this.mouth.bite();
    }
}

import 'reflect-metadata';

import { container } from "./container";
import { Human } from "./test-class";
const human = container.get<Human>(Human.name);

human.fight();
human.sneak();

 

可以看到，这里使用了Injectable类装饰器标记了类是可以注入的。