Decorators in Typescript
Article Directory
Introduction to decorators
A decorator is a method that can be injected into classes, methods, and attribute parameters to extend the functions of classes, attributes, methods, and parameters
Common decorators: class decorators, property decorators, method decorators, parameter decorators.
How to write decorators: ordinary decorators (cannot pass parameters), decorator factories (can pass parameters)
class decorator
It can be an ordinary decorator, and cannot pass parameters
Class decorators are declared before (next to) the class declaration. Class decorators are applied to class constructors and can be used to monitor, modify, or replace class definitions.
Class decorators can dynamically extend the properties and functions of a class without modifying the class
function beaty(parmas: any) {
console.log(parmas);
//parmas就是当前类
parmas.prototype.apiUrl = `动态扩展的属性`
parmas.prototype.run=function () {
console.log(`我是一个润方法`);
}
}
@beaty
class util {
constructor(){
}
getData() {
}
}
var i:any = new util()
console.log(i.apiUrl) //动态扩展的属性
i.run() //我是一个润方法
Can be a decorator factory (can pass parameters)
function beaty(parmas: string) {
return function(target:any) {
console.log(target);
// console.log(parmas);
target.prototype.apiUrlll = parmas
}
}
@beaty(`http://www.itying.com/api`)
class util {
constructor(){
}
getData() {
}
}
var i:any = new util()
console.log(i.apiUrlll)
Class decorator overloaded constructor
(Overloading is used in the constructor method in the decoration method to use the extends keyword, and then rewrite all the methods and properties in the class) The
class decorator expression will be called as a function at runtime, and the constructor of the class is its only If the
class decorator returns a value, it replaces the class declaration with the provided constructor
function beaty(target: any) {
console.log(target) //这个target是其装饰的util类
return class extends target {
//写一个类用extends关键字继承target，target就是类本身，重写里面的所有东西，并赋值
apiUrl: any = '我是修改之后的数据'
getData() {
}
}
}
@beaty
class util {
public apiUrl: string | undefined
constructor() {
this.apiUrl = '我是构造函数的apiUrl'
}
getData() {
console.log(this.apiUrl)
}
}
let i = new util()
i.getData()
property decorator
The property decorator expression will be called as a function at runtime, passing the following 2 parameters:
1. For static members, it is the constructor of the class, and for instance members, it is the prototype object of the class. 2. Member's name
function beaty(params: any) {
//console.log(params) //这个target是其装饰的util类
return function (target:any,attr:any) {
console.log(target);
console.log(attr);
target[attr]=params
}
}
class util {
@beaty(`http`) //给url传东西
url: string | undefined
}
console.log(new util().url); //输出http
method decorator
It will be applied to the method's attribute descriptor and can be used to monitor, modify or replace the method definition.
The method decoration will pass in the following three parameters at runtime:
1. For static members, it is the constructor of the class, and for instance members, it is the prototype object of the class.
2. The name of the member.
3. The attribute descriptor of the member
function GET(url: string) {
return function (target:any, methodName: string, descriptor: PropertyDescriptor) {
console.log(target);
console.log(methodName);
console.log(descriptor);
target.apiUrl = 'ppppp'
target.run = function () {
console.log('run');
}
}
}
class Http {
constructor() {
}
@GET("xx") //在方法上方定义
getUser() {
}
}
let i:any = new Http()
console.log(i.apiUrl); //输出ppppp
i.run() //输出run
Method parameter decorator
The parameter decorator expression will be called as a function at runtime, passing in the following three parameters:
1. For static members, it is the constructor of the class, and for instance members, it is the prototype object of the class.
2. The name of the parameter.
3. The index of the parameter in the function parameter list.
function PathParam(paramName: string) {
return function (target:any, methodName: string, paramIndex: number) {
target.apiUrl = paramName;
}
}
class Http {
constructor() {
}
getUser( @PathParam("userId11111") userId: string) {
console.log(userId);
}
}
var http:any = new Http()
http.getUser(123456)
console.log(http.apiUrl); //输出userId11111
Order of execution of decorators
Properties > Method > Method Parameters > Class
Note: If there are multiple same decorators, it will execute the latter decorators first.