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了。