数码吧

1.angular装饰器ts反编译

1.angular中默认使用装饰器来定义组件模块等

@Component()
@NgModule()
@Pipe()
@Directive()
@Input()
@Output()
...

angular最常见的就是装饰器，基本每个ts中都要使用到，装饰器解析方法固定的，如下：

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

angular2官网中装饰器

import { Directive } from '@angular/core';
@Directive({
    selector: '[appKeyboard]'
})
export class KeyboardDirective {

}

对应解析为

    define(["require", "exports", "@angular/core"], function (require, exports, core_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var KeyboardDirective = /** @class */ (function () {
        function KeyboardDirective() {
        }
        KeyboardDirective = __decorate([
            core_1.Directive({
                selector: '[appKeyboard]'
            })
        ], KeyboardDirective);
        return KeyboardDirective;
    }());
    exports.KeyboardDirective = KeyboardDirective;
});

方法最下面exports输出的就是方法名称，中间core_1.Directive就是对应的angular方法。

define(["require", "exports", "@angular/core"], function (require, exports, core_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var DownloadService = /** @class */ (function () {
        function DownloadService() {
        }
        DownloadService = __decorate([
            core_1.Injectable()
        ], DownloadService);
        return DownloadService;
    }());
    exports.DownloadService = DownloadService;
});

可以按照对应解析为：

@Injectable()
export class DownloadService{}

复杂一点的装饰器，其实也是一样原理

define(["require", "exports", "@angular/core"], function (require, exports, core_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var KeyboardDirective = /** @class */ (function () {
        function KeyboardDirective() {
            this.keyChange = new core_1.EventEmitter();
        }
        KeyboardDirective.prototype.getKeyupCode = function (e) {
        };
        KeyboardDirective.prototype.getKeydownCode = function (e) {
        };
        __decorate([
            core_1.Output()
        ], KeyboardDirective.prototype, "keyChange", void 0);
        __decorate([
            core_1.HostListener('keyup', ['$event'])
        ], KeyboardDirective.prototype, "getKeyupCode", null);
        __decorate([
            core_1.HostListener('keydown', ['$evnet'])
        ], KeyboardDirective.prototype, "getKeydownCode", null);
        KeyboardDirective = __decorate([
            core_1.Directive({
                selector: '[appKeyboard]'
            })
        ], KeyboardDirective);
        return KeyboardDirective;
    }());
    exports.KeyboardDirective = KeyboardDirective;
});

对应解析为

@Directive({
    selector: '[appKeyboard]'
})
export class KeyboardDirective {
    @Output() keyChange;
    @HostListener('keyup', ['$event'])
    getKeyupCode(e){}
    @HostListener('keydown', ['$evnet'])
    getKeydownCode(e){}
}

部分装饰器使用时，会有相应方法，会被解析成prototype的方法，找到对应名称补上就好。

有的解析时候添加类型变成：

__decorate([
    core_1.Input(),
    __metadata("design:type", Boolean)
], KeyboardDirective.prototype, "show", void 0);

解析：

@Input() show: boolean;