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内执行了装饰器。

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