Angular Component TypeScript代码和最后转换生成的JavaScript代码比较

Jerry Wang

发布于 2020-08-14 09:49:39

5610

发布于 2020-08-14 09:49:39

文章被收录于专栏：Jerry的SAP技术分享 Jerry的SAP技术分享Jerry的SAP技术分享

TypeScript代码使用@Component定义一个Component：

@Component({
  selector: 'app-shipping',
  templateUrl: './shipping.component.html',
  styleUrls: ['./shipping.component.css']
})

转换后的JavaScript代码：

var ShippingComponent = /** @class */
        (function() {
            function ShippingComponent(cartService, http1, http2) {
                this.cartService = cartService;
                this.http1 = http1;
                this.http2 = http2;
            }
            ShippingComponent.prototype.ngOnInit = function() {
                // return this.http.get('/assets/shipping.json');
                this.shippingCosts = this.cartService.getShippingPrices();
            }
            ;
            var _a, _b, _c;
            ShippingComponent = __decorate([core_1.Component({
                selector: 'app-shipping',
                template: require("./shipping.component.html"),
                styles: [require("./shipping.component.css")]
            }), __metadata("design:paramtypes", [typeof (_a = typeof cart_service_1.CartService !== "undefined" && cart_service_1.CartService) === "function" ? _a : Object, typeof (_b = typeof http_1.HttpClientModule !== "undefined" && http_1.HttpClientModule) === "function" ? _b : Object, typeof (_c = typeof http_2.HttpClient !== "undefined" && http_2.HttpClient) === "function" ? _c : Object])], ShippingComponent);
            return ShippingComponent;
        }());

分别对应了下图红色和蓝色区域：

(1) TypeScript里的构造函数，对应JavaScript里的ShippingComponent构造函数。

(2) TypeScript里的ngOnInit Hook，对应JavaScript里的原型链上的ShippingComponent.prototype.ngOnInit.

(3) TypeScript里的@Component注解(或者叫装饰器decorator)，对应JavaScript变量__decorate指向的函数。

最后，从@angular/core导入的core_1.Component, 经过装饰器函数__decorate处理之后，返回ShippingComponent，被赋给exports的ShippingComponent属性，这样其他Component就可以通过import导入这个Component了。