ts的装饰器
console.log('装饰器.......')
// 装饰器就是一个方法,可以注入到类,方法,属性上来拓展类,属性,方法,参数的功能
// 常见:类装饰器,属性装饰器,方法装饰器,参数装饰器
// 写法:1.普通装饰器(无法传参) 2.装饰器工厂(可传参) // 1.类装饰器
// 类装饰器在类声明之前被声明(紧靠着类声明)。 类装饰器应用于类构造函数,可以用来监视,修改或替换类定义。
// 普通装饰器(无法传参)
function logClass(params: any) {
console.log(params)
// 通过原型链拓展类,属性,方法,参数
params.prototype.apiUrl = 'xxx'
params.prototype.run = function () {
console.log('run...........')
}
} @logClass
class HttpClient {
constructor() {}
getData() {}
}
let http: any = new HttpClient()
console.log(http)
http.run() // 装饰器工厂(可传参)
function logClass1(params: string) {
return function (target: any) {
console.log(params)
console.log(target)
target.prototype.apiUrl = params
}
} @logClass1('hello')
class HttpClient1 {
constructor() {}
getData() {}
}
let http1: any = new HttpClient1()
console.log(http1) // 重载构造函数
function logClass2(target: any) {
return class extends target {
api: any = 'api2222'
getData() {
console.log(this.api + '333')
}
}
} @logClass2
class HttpClient2 {
public api: string | undefined
constructor() {
this.api = 'api11111'
}
getData() {
console.log(this.api)
}
}
let http2: any = new HttpClient2()
console.log(http2)
http2.getData() // 2.属性装饰器
// 属性装饰器表达式会在运行时被当作函数调用
// 接收两个参数
// 1. 对于静态成员是类的构造函数,对于实例成员是类的原型对象
// 2. 成员的名字 // 类装饰器
function logClass3(params: string) {
return function (target: any) {
// console.log(params)
// console.log(target)
target.prototype.apiUrl = params
}
} // 属性装饰器
function logProperty(params: string) {
return function (target: any, attr: any) {
// console.log(params)
// console.log(target)
target[attr] = params
}
} @logClass3('hello33333')
class HttpClient3 {
@logProperty('hello4444')
public api: any | undefined
constructor() {}
getData() {}
}
let http3: any = new HttpClient3()
console.log(http3) // 3.方法装饰器
// 应用在方法的属性描述上,可以用来监视、修改、替换方法定义
// 接收三个参数
// 1. 对于静态成员是类的构造函数,对于实例成员是类的原型对象
// 2. 成员的名字
// 3. 成员的属性的描述
function logClass4(params: string) {
return function (target: any, methodsName: any, desc: any) {
console.log(target)
console.log(methodsName)
console.log(desc)
console.log(desc.value)
let o = desc.value
desc.value = function (...args: any[]) {
args = args.map((item) => {
return String(item) + params
})
o.apply(this, args)
}
}
} class HttpClient4 {
public api: any | undefined
constructor() {}
@logClass4('方法装饰器方法装饰器方法装饰器方法装饰器')
getData(...args: any[]) {
console.log(args)
console.log('getDatagetDatagetData')
}
}
let http4: any = new HttpClient4()
http4.getData(123, 'xxx') // 4.参数装饰器
// 参数装饰器表达式会在运行时当作函数被调用,可以使参数装饰器为类的原型增加一些元素数据
// 1. 对于静态成员是类的构造函数,对于实例成员是类的原型对象
// 2. 参数的名字
// 3. 参数索引
function logClass5(params: string) {
return function (target: any, methodsName: any, desc: any) {
console.log(target)
console.log(methodsName)
console.log(desc)
}
} class HttpClient5 {
public api: any | undefined
constructor() {} getData(@logClass5('参数装饰器参数装饰器') uuid: any) {
console.log(uuid)
}
}
let http5: any = new HttpClient5()
http5.getData(1232123) // 装饰器执行顺序
// 属性>方法参数>方法>>类
// 存在多个同样装饰器则是从下到上执行
function logClass6(params: string) {
return function (target: any, methodsName: any, desc: any) {
console.log(params)
}
}
function logClass7(params: string) {
return function (target: any, methodsName: any, desc: any) {
console.log(params)
}
}
function logClass8(params: string) {
return function (target: any, methodsName: any, desc: any) {
console.log(params)
}
}
function logClass9(params: string) {
return function (target: any, methodsName: any, desc: any) {
console.log(params)
}
} function logClass10(params: string) {
return function (target: any) {
console.log(params)
}
} function logClass11(params: string) {
return function (target: any, attr: any) {
console.log(params)
}
} @logClass10('类装饰器装饰器')
class HttpClient6 {
@logClass11('属性装饰器')
public api: any | undefined
constructor() {}
@logClass8('方法装饰器装饰器1')
@logClass9('方法装饰器装饰器2')
getData(
@logClass6('参数装饰器1') uuid1: any,
@logClass7('参数装饰器2') uuid2: any
) {
console.log(uuid1)
console.log(uuid2)
}
}
let http6: any = new HttpClient6()
http6.getData(1232123, 234)
ts的装饰器的更多相关文章
- ts装饰器的用法,基于express创建Controller等装饰器
TS TypeScript 是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类 型和基于类的面向对象编程. TypeScript 扩 ...
- TS 自学笔记(二)装饰器
TS 自学笔记(二)装饰器 本文写于 2020 年 9 月 15 日 上一篇 TS 文章已经是很久之前了.这次来讲一下 TS 的装饰器. 对于前端而言,装饰器是一个陌生的概念,但是对于 Java.C# ...
- ts中的装饰器
// 装饰器一种特殊的类的声明, 扩展类.属性.方法. function logClass(params:any) { console.log(params); // params代表HttpClic ...
- JS中bind、call和apply的作用以及在TS装饰器中的用法
目录 1,前言 1,call 1.1,例子 1.2,直接调用 1.3,将this指向另一个对象 1.4,传递参数 2,apply 2.1,例子 2.2,直接调用 2.3,将this指向另一个对象 2. ...
- python-大话装饰器
装饰器 装饰器是个什么玩意呢?是个会了不难,装逼神器.但是如果不了解理解起来还是很抽象,让我们试试这个装逼神器吧! 1.什么是装饰器 装饰器是一个很著名的设计模式,经常被用于有切面需求的场景,较为经典 ...
- Python学习笔记——基础篇2【第三周】——计数器、有序字典、元组、单(双)向队列、深浅拷贝、函数、装饰器
目录 1.Python计数器Counter 2.Python有序字典OrderredDict 3.Python默认字典default 4.python可命名元组namedtuple 5.Python双 ...
- 基于TypeScript装饰器定义Express RESTful 服务
前言 本文主要讲解如何使用TypeScript装饰器定义Express路由.文中出现的代码经过简化不能直接运行,完整代码的请戳:https://github.com/WinfredWang/expre ...
- TypeScript装饰器(decorators)
装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上,可以修改类的行为. 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被 ...
- JS 装饰器解析
随着 ES6 和 TypeScript 中类的引入,在某些场景需要在不改变原有类和类属性的基础上扩展些功能,这也是装饰器出现的原因. 装饰器简介 作为一种可以动态增删功能模块的模式(比如 redux ...
- 【Angular专题】 (3)装饰器decorator,一块语法糖
目录 一. Decorator装饰器 二. Typescript中的装饰器 2.1 类装饰器 2.2 方法装饰器 2.3 访问器装饰器 2.4 属性装饰器 2.5 参数装饰器 三. 用ES5代码模拟装 ...
随机推荐
- 把MyBatis当项目一样,讲透源码的技术书籍!
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 为啥?因为这些年,就很少有人能自主意识到,如何提升编码质量! 但讲屁话没有用,想学好编程突破阶 ...
- 通过手动创建hibernate工厂,自动生成表,完成数据库备份还原功能
最近做toB.toG业务,普遍要去适配各种国产数据库,所以不得不用hibernate,过去这么多年一直都是用mybatis+mysql,现在重拾hibernate,专注跨数据库,感兴趣的加关注. 需求 ...
- centos7中关闭防火墙命令
1.命令行界面输入命令"systemctl status firewalld.service"并按下回车键. 2.然后在下方可以查看得到"active(running)& ...
- JMeter 常用的几种断言方法
一.Jmeter 断言背景 在使用Jmeter进行性能测试或者接口自动化测试工作中,经常会用到的一个功能,就是断言.断言是在请求的返回层面增加一层判断机制.因为请求成功了,并不代表结果一定正确,因此需 ...
- 41.Sentinel
Feign 整合 Sentinel 依赖 <!--Feign--> <dependency> <groupId>org.springframework.cloud& ...
- Open vSwitch虚拟交换机实践
实验2:Open vSwitch虚拟交换机实践 (一)基本要求 1.ovs-vsctl基础操作实践: 创建OVS交换机,完成相关要求后查看网络状态与端口信息: 2.使用Mininet搭建的SDN拓扑, ...
- Java面向对像之方法重写
方法重写Override 重写:需要有继承关系,子类重写父类的方法! 特点: 1.方法名必须相同 2.参数列表必须相同 3.修饰符:范围可以扩大:public > Protected > ...
- AWG含义及尺寸电流对照表-转载
AWG含义及尺寸电流对照表 - 麦穗鱼~ - 博客园 (cnblogs.com) AWG(American wire gauge)美国线规,是一种区分导线直径的标准,又被称为 Brown & ...
- Aspose.Cells 拒绝访问、数据库 64 bit mode with the 32 bit Oracle、视图加载格式不正确。
第一次遇到发布程序后,引发的这么多奇葩问题.记录一下. 配置:windows server 2018 R2 企业版 sp1 这是一台闲置4年机子,拿到机子里面已经安装过oracle客户端,我直接卸载装 ...
- 2023 2 4 c++NOIP机试 小豫豫在郑州 type
1 #include <iostream> 2 #include <string> 3 using namespace std; 4 int j(string str){ 5 ...