第四篇：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類裝飾器標記了類是可以注入的。