Typescript: decorator for classes

Typescript decorator I didn’t know its role scene very well when I was learning typescript. I didn’t understand its role until I used the nest.js framework, so I studied it in depth, hoping to improve my understanding of nest Use of .js.

decorator

Decorators provide a way for us to add annotations on class declarations and members through metaprogramming syntax

A decorator is a special type of declaration that can be attached to a class declaration , method , accessor , property or parameter .

The decorator uses @expressionthis form, and must be a functionexpression after evaluation , which will be called at runtime, and the decorated declaration information is passed in as a parameter

function setProp(){
    
    
  return function target(){
    
    
    
  }
}
@setProp()

decorator evaluation

A reference to a decorator in a class, parameter decorator, method decorator, accessor decorator or property decorator, applied to instance members

Parameter decorator, method decorator, accessor decorator, property decorator, applied to static members

The parameter decorator is applied to the constructor

The class decorator is applied to the class

class decorator

A class decorator is declared before the class declaration. The class decorator is applied to the constructor of the class and can be used to observe, modify or replace the class definition.

A class decorator receives the constructor of the decorated class as the only argument

If the class decorator returns a value, it replaces the class declaration with the provided constructor.

function setName(name: string) {
    
    
    return (target: new () => any) => {
    
    
      sign = target;
    }
  }
  @setName('lison')
  class ClassDes {
    
    
    constructor() {
    
    

    }
  }

method decorator

Method modifiers are declared before method declarations. Modifiers are applied to the method's property descriptor and can be used to observe, modify, or replace the method definition.

The method decorator receives three parameters:

1. A constructor of a class that is a static member or a prototype of a class that is an instance member
2. member name
3. member property descriptor

If the method decorator returns a value, it will be used as the method's property descriptor.

function methodDecorator(target, propertyName,propertyDescriptor){
    
    
	
}
class Person {
    
    
	name:string;
	constructor(name:string){
    
    
		this.name = name;
	}
	@methodDecorator
	getName(){
    
    
		return this.name;
	}
}

visitor decorator

Declared before accessor declarations. Accessor modifiers are applied to the accessor's property descriptor and can be used to observe, modify, or replace the accessor's definition.

The visitor decorator receives three parameters:

1. A constructor of a class that is a static member or a prototype of a class that is an instance member
2. member's name
3. member property descriptor

If the visitor decorator returns a value, it will be used as the member's property descriptor

function getterDecorator(target, propertyName,propertyDescriptor){
    
    
	
}
class Person {
    
    
	constructor(name:string){
    
    
		this.name = name;
	}
	@getterDecorator
	get name(){
    
    
		return this.name;
	}
}

property decorator

Declared before property declarations.
The property decorator accepts two parameters:

1. A class constructor for static members or a class prototype for instance members.
2. member's name

The return value of the property decorator is ignored.

function getterDecorator(target, propertyName,){
    
    
	
}
class Person {
    
    
	@propertyDecorator
	name:string
	constructor(name:string){
    
    
		this.name = name;
	}
}

parameter decorator

A parameter decorator was declared before the parameter declaration. Parameter modifiers are applied to functions declared by class constructors or methods.

The parameter decorator accepts three parameters:

1. Constructor of a class for static members or class prototype for instance members
2. member's name
3. The ordinal index of the parameter in the function parameter list

The return value of the parameter decorator is ignored.

function paramsDecorator(target, propertyName,index){
    
    
	
}
class Person {
    
    
	name:string
	constructor(name:string){
    
    
		this.name = name;
	}
	eat(@paramsDecorator food:string){
    
    
	
	}
}

Order of execution of decorators

1. Execution parameter decorator
2. Implement method and property decorators
3. Executing class decorators
   The general rule is to execute from the inside out, first execute the inside decorator, and then execute outward in turn.