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

  • 分类:【Nodejs
  • 浏览【1038】
  • 评论【0】
  • 更新【2016-10-16 21:03:51】

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);
    };
}

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

> node test.js
>>>> hello

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

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

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

关键字词:typescript装饰器