Decorator in TS

Class decorator

Class decorators are declared before and immediately after the class declaration. The class constructor is used to listen, modify, and replace the class definition, passing in an argument that extends the class’s properties and methods.

• Pass no arguments

function logClass(params: Any) {console.log(params) // This patams is the current class params.prototype.url = '🦢 home 'params.prototype.run = () => { Console. log(' client first ')}} @logClass class MyClass {constructor() {}} let MyClass: any = new MyClass() console.log(myClass.url) myClass.run()Copy the code

Execution Result:

Class {constructor() {}} 🦢

• Incoming parameters

function logClass(params:any) { return function (target: Log (params) console.log(target) target.prototype.url = params target.prototype.run = function () {console.log(' 🦢 ')}} @logclass ('🦢 ') class MyClass {name: string constructor() { } } let myClass: any = new MyClass() myClass.run()Copy the code

Execution Result:

🦢 home class {constructor() {}} Customer first

Class decorator reloads the constructor

The class decorator reloads the constructor for increased extensibility, increased functionality, and the ability to extend without modifying the core code.

function logClass(target:any){ console.log(target); Return class extends Target {// Returns an inheritance from target, Make an extension url:any = '🦢 home 'getData(){this.url = this.url +' customer service first '; The console. The log (enclosing url)}}} @ logClass class MyClass {url: string | undefined constructor () {this. Url = '58 home'} getData(){ console.log(this.url) } } let myClass = new MyClass() myClass.getData()Copy the code

The execution result is as follows:

class {constructor() {this.url = “58\u5230\u5BB6”; } getData() {console.log(this.url); 🦢 Home customer service first

Attribute decorator

The property decorator is called as a function at runtime, passing in two arguments:

• Class constructor for static members and prototype object for instance members
• 2. Members’ names

function logProperty(params: any) { return function (target: any, attr: Class MyClass1 {@logProperty('🦢 home ') url: any) {console.log(target) console.log(attr) target[attr] = params}} class MyClass1 {@logProperty('🦢 home ') url: any | undefined constructor() { } }Copy the code

The running results are as follows:

🦢

Method decorator

Method decorators are applied to method property descriptors and can be used to monitor, modify, and replace method definitions. The runtime passes in three arguments:

• Class constructor for static members and prototype object for instance members
• 2. Members’ names
• 3. Attribute descriptors for members

function logMethod(params: any) {
  return function (target: any, methodName: any, desc: any) {
    console.log(target)
    console.log(methodName)
    console.log(desc)

    target.newUrl = params
    target.run = () => {
      console.log('run')
    }
  }
} 

class MyClass {
  url: any | undefined
  constructor() {
  }

  @logMethod('daojia.com')
  getData() {
  }
}

let myClass: any = new MyClass()
console.log(myClass.newUrl)
Copy the code

The output is:

{constructor: ƒ, getData: ƒ} getData {writable: true, enumerable: false, different: true, value: ƒ

Method decorator modification method

function logMethod(params: any) { return function (target: any, methodName: any, desc: any) { console.log(target) console.log(methodName) console.log(desc) console.log(desc.value) let curMethod = desc.value desc.value = function (... args: any[]) { args = args.map((val) => { return String(val) }) curMethod.call(target, ... args) } } } class MyClass { constructor() { } @logMethod('daojia.com') getData(... args: any) { console.log(args) } } let myClass: any = new MyClass() console.log(myClass.getData(1, 2))Copy the code

Running results:

{constructor: ƒ, manufacturer: ƒ} getData {writable: true, enumerable: false, different: true, value: ƒ} getData(… args) {console.log(args); } / “1”, “2”

Parameter decorator

The parameter decorator is called at runtime as a function that adds some element data to the class’s prototype, passing in three arguments:

• Class constructor for static members and prototype object for instance members
• 2. Parameter method name
• Parameter index in function parameter list

function logParams(params: any) {
  return function (target: any, methodName: any, paramsIndex: any) {
    console.log(target)
    console.log(methodName)
    console.log(paramsIndex)

    target[methodName](params)
  }
} 

class MyClass {
  constructor() {
  }

  getData(@logParams('🦢到家') params: any) {
    debugger
    console.log(params)
  }
}
Copy the code

The output is:

{constructor: ƒ, getData: ƒ} getData 0 🦢

conclusion

Decorators are executed in the following order: Attribute decorator – method decorator (from back to front) – Class decorator (from back to front)