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

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代码比较相关推荐

Angular Component代码和编译后生成的JavaScript代码
从 TypeScript 转换为 JavaScript 在这里称为编译. 在这种情况下,compiling 并不意味着创建二进制代码. 对于这种翻译,使用术语 transpilation 而不是 co ...
TypeScript输入参数的默认值一例，以及对应生成的JavaScript代码分析
const fun = ({ aa = 1, bb = 0 } = {}) => {console.log('aa: ' + aa);console.log('bb: ' + bb);retur ...
typescript设置默认值_TypeScript输入参数的默认值一例，以及对应生成的JavaScript代码分析...
const fun = ({ aa = 1, bb = 0 } = {}) => { console.log('aa: ' + aa); console.log('bb: ' + bb); re ...
无需写代码！可一键生成前后端代码的开源工具
作者 | HelloGitHub-小鱼干来源 | HelloGitHub(ID:GitHub520) JeecgBoot 是一款基于代码生成器的低代码开发平台,零代码开发.JeecgBoot 采用开 ...
stm32代码_MATLAB(STM32MATTARGET) 自动生成STM32工程代码
利用MATLAB的SIMULINK自动生成STM32工程代码,本课程介绍如何利用MATLAB,STM32-MAT,STM32CUBE 如何在SIMLINK中仿真并且生成工程代码,本课程将以SPWM波的 ...
java如何调用网页_如何使用网页开发自己的app，在网页中的按钮与自己的java代码绑定来实现打电话即javascript代码调用java代码，和java代码来调用javascript代码...
1首先是如何在自己的app里用网页显示,这样可以较快的更新界面而不需要让客户端升级,方法如下: xml文件: android:layout_width="fill_parent" ...
java 代码压缩javascript_通过Java压缩JavaScript代码实例分享
通过移除空行和注释来压缩 javascript 代码 /** * this file is part of the echo web application framework (hereinafte ...
javascript代码_15个最好用的JavaScript代码压缩工具
JavaScript 代码压缩是指去除源代码里的所有不必要的字符,而不改变其功能的过程.这些不必要的字符通常包括空格字符,换行字符,注释以及块分隔符等用来增加可读性的代码,但并不需要它来执行. 在这篇 ...
php运行js代码,如何在PHP中运行JavaScript代码？（代码示例）
JavaScript是客户端脚本语言,PHP是用于与数据库交互的服务器端脚本语言.那么如何如何在PHP中运行JavaScript?本篇文章就来给大家介绍几种在PHP中运行JavaScript的方法,希 ...

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

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

最新文章

热门文章