TypeScript中的装饰器Decorato什么时候执行?

ES6引入了类的概念,同时也引入了类似于java的注解概念,我们称之为装饰器,用于在某些场景下修改类和类成员。typescript要支持装饰器需要手动开启experimentalDecorators

命令行编译

tsc --target ES5 --experimentalDecorators /test.ts 或者配置文件设置:

tsconfig.json:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

那么这个装饰器到底什么原理呢?它是什么时候执行的?用下面代码为例:

//test.ts
class Route {
    greeting: string;
    constructor(greet: string){
        this.greeting = greet;
    }

    @route("hello")
    default(): any {
        console.log(this.greeting);
    }
}

function route(name: string) {
    return function (target: Object, value: string, desc: PropertyDescriptor) {
        console.log('>>>>', name);
    }
} 

生成的js代码:

//test.js
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var Route = /** @class */ (function () {
    function Route(greet) {
        this.greeting = greet;
    }
    Route.prototype.default = function () {
        console.log(this.greeting);
    };
    __decorate([
        route("hello")
    ], Route.prototype, "default", null);
    return Route;
}());
function route(name) {
    return function (target, value, desc) {
        console.log('装饰器输出', name);
    };
}

备注

target,//被装饰对象,就是例子中的default函数 
key,//被装饰对象的名字:default 
desc//被装饰对象属性描述,比如这个对象是否可读写,枚举

在命令行下执行编译出的test.js文件:

> node test.js
装饰器输出 hello

执行test.js后会有内容输出,除了@route("hello")这行代码外,再没有其他地方执行route函数,耐心的看一下生成的js代码就能知道route函数是在声明Route类的时候执行的,在Route函数内执行了__decorate,然后又在__decorate内执行了装饰器。

总结:装饰器函数在声明被装饰对象时执行,也就是声明完函数,再执行装饰器并且对声明的函数做一些操作。