三分钟快速了解typeScript的装饰器

↓↓↓
typeScript系列学习文章目录

装饰器:装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，属性或参数上，可以修改类的行为。

通俗的讲装饰器就是一个方法，可以注入到类、方法、属性参数上来扩展类、属性、方法、参数的功能。

常见的装饰器有：类装饰器、属性装饰器、方法装饰器、参数装饰器

装饰器的写法：普通装饰器（无法传参）、装饰器工厂（可传参）

注意：使用装饰器会报以下错误,点击快速修复或者手动在json文件里增加以下代码

"experimentalDecorators": true,

对修饰器的实验支持是一项将在将来版本中更改的功能。设置 "experimentalDecorators" 选项以删除此警告。

运行顺序：属性>方法>方法参数>类如果有多个同样的装饰器，它会先执行后面的

类装饰器

类装饰器在类声明之前被声明（紧靠着类声明）。类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。

类装饰器:普通装饰器（无法传参）

function logClass(params:any){console.log(params)// 动态扩展属性egparams.prototype.name = "fur"//动态扩展方法params.prototype.run =function(){console.log("run")}
}
@logClass
class  Person { study(){console.log("study")}
}var p:any = new Person()
p.study()//study
console.log(p.name)//fur
p.run()//run

类装饰器:装饰器工厂（可传参）

function logClass(params:any){return function(target:any){target.prototype.name=params;}
}
@logClass('furfur')
class  Person { study(){console.log("study")}
}
var p:any = new Person()
p.study()//study
console.log(p.name)//furfur

属性装饰器

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。

2、成员的名字。

function logProperty(params:any){return function(target:any,attr:any){target[attr]=params;console.log(attr)console.log(target)}
}class  Person {@logProperty("fur") name:string|undefined;constructor(){}study(){console.log("study")}
}var p:any = new Person()
p.study()//study
console.log(p.name)//fur

方法装饰器

它会被应用到方法的属性描述符上，可以用来监视，修改或者替换方法定义。

方法装饰会在运行时传入下列3个参数：

1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。

2、成员的名字。

3、成员的属性描述符

function get(params:any){return function(target:any,methodName:any,desc:any){console.log(methodName);//getDatatarget.apiUrl='fur';target.run=function(){console.log('run');}}
}class HttpClient{  public url:any |undefined;constructor(){}@get('http://www.fur.com')getData(){        }
}var http:any=new HttpClient();
console.log(http.apiUrl);//fur
http.run();//run

方法参数装饰器

方法参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

1、对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。

2、参数的名字。

3、参数在函数参数列表中的索引。

function logParams(params:any){return function(target:any,methodName:any,paramsIndex:any){console.log(params);//furconsole.log(target);//objectconsole.log(methodName);//getDataconsole.log(paramsIndex);//0target.apiUrl=params;}
}class HttpClient{  public url:any |undefined;constructor(){}           getData(@logParams('fur') uuid:any){               console.log(uuid);}}var http:any = new HttpClient();
http.getData("furfur");//furfur
console.log( http.apiUrl);//fur

↓↓↓
typeScript系列学习文章目录