vue-typescript-decorators v0.2.4

Typescript decorators for Vue 2.0

Intro

This started as a fork of the amazingly awesome library av-ts. I forked it, because I wanted to have a few things styled differently, syntax wise. And I turned it into its own library, because I wanted to be able to add it like a normal library in my package.json.

Example of most of the features:

import { Vue, Component, prop, watch, lifecycle, filter
  state, mutation, getter, action } from 'vue-typescript-decorators'
import { OtherComponent } from './components/OtherComponent.vue'

@Component
export class MyComponent extends Vue {
  // Static properties and methods are
  // automatically added to the component's options.
  static components = { OtherComponent }

  // Any regular properties are added to the data-option.
  myData = '123'

  // This still counts as a property and so will be
  // added to the data-option instead of the methods-option.
  funcData = function() {
    console.log('ひふみ')
  }

  // The given type will end up being the prop's type.
  @prop numberWithoutDefault: number
  @prop noDefaultInfersRequired: number

  // The given default value will be the prop's default.
  @prop defaultInfersNotRequired = 'Hello World!'
  @prop nullableSoNotRequired: boolean | null = null

  // This prop will be of type function
  // and the given function will be its default value.
  @prop functionType = (a: number) => a === 5

  /**
   * This prop will be of type number
   * and the **result** of the given
   * function will be its default value.
   * The function will only run if
   * no value was given at creation
   */
  @prop functionDefault: number = resultOf(
    function(this: MyComponent) {
      return this.countIncrementedByFunctionDefaultProp++
    }
  )
  @prop countIncrementedByFunctionDefaultProp = 0

  /**
   * This object will be placed in a function
   * and cloned for every new instance,
   * so no worries about shared state
   */
  @prop objectDefault = {a: 123, b: 456}

  @prop({required: true})
  forcedRequired = 123

  @prop({required: false})
  forcedNotRequired: number

  @prop({default: 'overwritten'})
  defaultOverwritten = 'this will be overwritten'

  /**
   * When a prop has multiple types
   * then this library can't infer them.
   * So you'll have to define them explicitly.
   */
  @prop(String, Number)
  multiTyped: string | number = '1234'

  // Any regular method will be
  // added to the methods-option.
  myMethod() {
    alert('Hi!')
  }

  // Any regular getter / setter will
  // be added to the computed-option.
  get myGetter() {
    return this.myData
  }

  myWatchee = 'watch me!'

  @watch('myWatchee')
  logWatch(str: string) {
    console.log(this.myData)
  }

  /**
   * both these methods will be added
   * to the methods-option, and they
   * will both be called at the moment
   * the lifecyle hook runs. So you
   * can have multiple methods for
   * one lifecycle hook.
   */
  @lifecycle created() {
    this.lifecycleHooksCalled++
  }

  @lifecycle('created')
  initializeSomeStuff() {
    this.lifecycleHooksCalled++
  }

  lifecycleHooksCalled = 0

  // This method will not be added to the
  // methods option. It will only be
  // added to the filters option.
  @filter toUpper(input: string): string {
    return input.toUpperCase()
  }

  // maps store.state.counter
  @state counter: number

  // maps store.mutations.increment
  @mutation increment: () => void

  // you can also provide a string identifier
  @getter('unfinishedTodos') todos: string[]

  // finally we also map actions of course
  @action doSomething: (n: number) => void
}

For all other features I refer you to the original library.