ts装饰器
1、类装饰器
类装饰器在类声明之前被声明（紧跟着类声明），类装饰器应用于类构造函数，可以用来监视、修改或替换类定义，传入一个参数
function logClass(params:any) {
console.log(params);//参数实际为类
params.prototype.apiUrl = '动态扩展的属性';
params.prototype.run = function() {
console.log('我是一个run方法')；
}
}
@logClass //在这里调用装饰器，不传入参数，后面没有分号
class HttpClient {
constructor() {
}
getData() {
}
}
let http:any = new HttpClient();
console.log(http.apiUrl);
http.run()
装饰器工厂（可传参）
function logClass(params:string) {
return function(target:any) {
target.prototype.apiUrl = params;
console.log(target);
console.log(params);
}
}
@logClass('hello') //传入的参数赋值给params
class HttpClient {
constructor() {
}
getData() {
}
}
重载
function logClass(target:any) {
console.log(target);
return class extends target {
apiUrl:any = '我是修改后的数据';
getData (){
this.apiUrl = this.apiUrl + '=====';
console.log(this.apiUrl);
}
}
}
@logClass
class HttpClient {
public apiUrl:string | undefined;
constructor(){
this.apiUrl = '我是构造函数里面的apiUrl'；
}
getData() {
console.log(this.apiUrl);
}
}
let http = new HttpClient();
http.getData();
2、装饰器的概念
装饰器是一种特殊类型的声明，它能够被附加到类声明、属性或参数上，可以修改类的行为
通俗的讲装饰器就是一种方法，可以注入到类、方法、属性参数上来扩展类、方法、参数的功能
常见的装饰器有：类装饰器、属性装饰器、参数装饰器
装饰器的写法：普通装饰器（无法传参），装饰器工厂（可传参）
3、属性装饰器
属性装饰器表达式会在运行时当作函数被调用，传入下面2个参数：
对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
成员名字
function logProperty(params:any) {
return function(target:any,attr:any){
console.log(target);
console.log(attr);
taget.attr = params;
}
}
class HttpClient {
@logProperty('http://itying.com')
public apiUrl:string | undefined;
constructor(){
}
getData() {
}
}
4、方法装饰器
它会被应用到方法的属性描述上，可以用来监视、修改或者替换方法定义
方法装饰器会在运行时传入下面3个参数：
对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
成员的名字
成员的属性描述
function get(params:any) {
return function(target:any,methodName:any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc);
taget.api = 'xxx';
target.run = function() {
condole.log('run');
}
}
}
class HttpClient {
public apiUrl:string | undefined;
constructor(){
}
@get('http://www.baidu.com')
getData() {
console.log(this.url);
}
}
function get(params:any) {
return function(target:any,methodName:any,desc:any){
console.log(target);
console.log(methodName);
console.log(desc);
//修改装饰器的方法，把装饰器方法里面传入的所有参数改为string类型
//保存当前的方法
let cMethod = desc.value;
desx.value = function(...args:any[]){
args = args.map(value =>{
return String(value)
})
cMethod.apply(this,args);
}
}
}
class HttpClient {
public apiUrl:string | undefined;
constructor(){
}
@get('http://www.baidu.com')
getData(...args:any[]) {
console.log(args);
console.log('我是getData里面的方法');
}
}
let http = new HttpClient();
http.getData(123,'xxx')
5、方法参数装饰器
方法参数装饰器表达式会在运行时当作函数被调用，可以使用参数装饰器为类的原型添加一些元素的数据，传入下面3个参数：
对于静态成员来说是类的构造函数，对于实例成员来说类的原型对象
方法的名字
参数在函数参数列表中的索引
function logParams(params:any) {
return function(target:any,methodName:any,paramsIndex:any){
console.log(target);
console.log(methodName);
console.log(paramsIndex);
}
}
class HttpClient {
public apiUrl:string | undefined;
constructor(){
}
getData(@logParams('uuid') uuid:any) {
console.log(args);
console.log(uuid);
}
}
let http = new HttpClient();
http.getData(123456)
6、装饰器执行顺序
属性装饰器
方法装饰器
方法参数装饰器2
方法参数装饰器1
类装饰器2
类装饰器1
相同类型的装饰器，先执行后面的，在执行前面的
|