ts decorator

Decorator: Decorator is a kind of grammar related to classes, used to annotate or modify the attributes of classes and class methods. Decorators are generally related to class classes. Do not use ordinary functions.

The essence of decorator is a function, it can add some other things to the class, attribute or method to extend the function

The modifier changes the behavior of the class when the code is compiled (not TypeScript compilation, but js compilation stage in the execution machine), not at runtime. This means that the decorator can run the code during the compilation phase. In other words, the decorator is essentially a function executed at compile time.
In the Node.js environment, the module will be executed as soon as it is loaded

(1) Example:

function decorator (target:any, key:any, descriptor:any) {
  console.log(target)
  console.log(key)
  console.log(descriptor)
}


class Test {
  private name:string;
  constructor(name:string) {
    this.name = name
  }
  @decorator
  getName () {
    return this.name
  }
}

Execute the file: ts-node index.ts

Will execute the decorator function

Output:

Let's look at these three parameters of the decorator:

target: who is acting on, it is the constructor of the class for static members, and the prototype object of the class for instance members;

key: member of the role

descriptor: the attribute descriptor of the member, where value is the method body

This is the most basic use of the decorator, the content of the decorator will be executed when it comes in for initialization

(2) Pass value through decorator

<template>
  <div @click="getName">点击</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
function decorator (params:Object) {
  return function (target:any, key:any, descriptor: any) {
    descriptor.value = () => {
      console.log('装饰器', params)
    }
  }
}
@Component
class Index extends Vue {
  private name:string = 'zfb'
  @decorator({ event_id: 'getName' })
  getName () {
    console.log('正宗的getName', this.name)
  }
}
export default Index
</script>

<style>

</style>

By rewriting the method body in the decorator, you can add additional operations to the decorated method, execute this code, and find that only the decorator rewrite is executed, and there is no execution method defined, so it needs to be rewritten in the function Add the original function operation

<template>
  <div @click="getName">点击</div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
const decorator = (params:Object) => {
  // 返回的函数是装饰器函数
  return (target:any, key:any, descriptor: any) => {
    var origin = descriptor.value // 保留原来的方法
    descriptor.value = function (...args:any[]) {
      origin.apply(this, ...args)
      console.log('装饰器', params)
    }
  }
}
@Component
class Index extends Vue {
  private name:string = 'zfb'
  @decorator({ event_id: 'getName' })
  getName () {
    console.log('正宗的getName', this.name)
  }
}
export default Index
</script>

<style>

</style>

This can be executed together

to sum up:

(1) The decorator of the class: the decorator can be called before the class, such as @Component. When decorating the class, it generally involves a parameter target

(2) Method decorator: this time involves three parameters target, key, descriptor

(3) Decorator for variable names

Guess you like