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

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular Component TypeScript代码和最后转换生成的JavaScript代码比较的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。