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