Angular Component TypeScript代码和最后转换生成的JavaScript代码比较
时间:2022-07-23
本文章向大家介绍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了。
- 【自然框架】注册会员活动——第一份代码的修改建议(第一版)
- 【视频】自然框架之分页控件的使用方法(一) PostBack方式的一般分页方式
- Java中的Socket编程学习
- 【视频】自然框架之分页控件的使用方法(二) 下载、DLL说明和web.config的设置
- Jsp开发中遇到的中文乱码问题及解决方法
- 开发中最常见的Java字符串问题总结
- .net异步性能测试(包括ASP.NET MVC WebAPI异步方法)
- Java 8的函数式编程学习
- 在C++中反射调用.NET(一) 反射调用第一个.NET类的方法
- QuickPager分页控件,最简单的设置代码
- Java中有关Null的9问题
- 在C++中反射调用.NET(二) 定义数据接口 绑定委托方法 使用SOD DTO 对象 将.NET对象转换到C++结构体为何不使用序列化的问题
- Java阻塞队列线程集控制的实现方法
- 【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java ConcurrentHashMap 高并发安全实现原理解析
- 第十二节:Activiti6.0——四种边界事件:定时器、错误、信号、补偿
- parted 磁盘分区-挂载-删除-shell脚本进行磁盘分区
- Ubuntu18.04——安装MySQL
- 八种 Vue 组件间通讯方式合集
- Sharding-JDBC 实现分库分表
- fastjson——使用 aop 打印入参,报错:getOutputStream() has already been called for this response
- webpack从零搭建开发环境
- 博客——使用 Redis 实现博客编辑的自动保存草稿功能
- linux下安装zabbix服务器shell脚本-添加主机-邮件监控报警zabbix-自动化运维
- Nginx——开启 GZIP 压缩
- 谈谈Vue.use的原理
- Nginx——ubuntu安装Nginx并配置https
- Istio 中业务开发需要关注的二三事
- MongoDB——Ubuntu安装及配置带认证的副本集(亲测)