[Vue + TS] Create your own Decorators in Vue with TypeScript

Posted 2020-10-07 Answer1215

We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however we will guide you through creating your own decorators in order to add common functionality to your Vue components using TypeScript.

 

Import:

import {createDecorator} from ‘vue-class-component‘

 

Define a decorator:

const Log = (msg) => {
  return createDecorator((component, key) => {
    console.log("#Component", component);
    console.log("#Key", key); //log
    console.log("#Msg", msg); //App
  })
}

 

Using it:

  @Log(‘fullMessage get called‘)
  get fullMessage() {
    return `${this.message} from Typescript`
  }

 

Output:

#Component Object {directives: Object, components: Object, name: "Hello", methods: Object, computed: Object…}
#Key fullMessage
#Msg fullMessage get called