[VUE] Vue+Typescript - Class based component

Vue + Typescript로 개발할때 Class based component에 유용한 라이브러리들에 대해 소개해보고자 합니다.
개인적으로 타입스크립트기반의 뷰를 만들때 필수적으로 사용하고 있는 라이브러리들입니다.

vue-decorator-property(https://github.com/kaorun343/vue-property-decorator)
vue-class-component기반에 라이브러리로 클래스 컴포넌트 스타일로 개발하기 쉽게 도와주는 데코레이터입니다.

Setup

npm i -S vue-property-decorator

Example

@Component
export class MyComponent extends Vue {
    @Prop() age!: number;
    @PropSync('name', { type: String }) syncedName!: string;
    @Model('change', { type: Boolean }) readonly checked!: boolean;
    @ModelSync('checked', 'change', { type: Boolean });
    @Watch('child')
      onChildChanged(val: string, oldVal: string) {};
    @Inject({ from: 'optional', default: 'default' }) readonly optional!: string;
    @ProvideReactive() one = 'value';
    @Emit('reset')
    resetCount() {
      this.count = 0
    }
}

vuex-class(https://github.com/ktsn/vuex-class)
vuex상태관리를 vue-class-component기반에 데코레이터 방식으로 개발을 할 수 있게 도와줍니다.

Setup

$ npm install --save vuex-class
# or
$ yarn add vuex-class

Example

import Vue from 'vue'
import Component from 'vue-class-component'
import {
  State,
  Getter,
  Action,
  Mutation,
  namespace
} from 'vuex-class'

const someModule = namespace('path/to/module')

@Component
export class MyComp extends Vue {
  @State('foo') stateFoo
  @State(state => state.bar) stateBar
  @Getter('foo') getterFoo
  @Action('foo') actionFoo
  @Mutation('foo') mutationFoo
  @someModule.Getter('foo') moduleGetterFoo

  // If the argument is omitted, use the property name
  // for each state/getter/action/mutation type
  @State foo
  @Getter bar
  @Action baz
  @Mutation qux

  created () {
    this.stateFoo // -> store.state.foo
    this.stateBar // -> store.state.bar
    this.getterFoo // -> store.getters.foo
    this.actionFoo({ value: true }) // -> store.dispatch('foo', { value: true })
    this.mutationFoo({ value: true }) // -> store.commit('foo', { value: true })
    this.moduleGetterFoo // -> store.getters['path/to/module/foo']
  }
}

개인적으로 위의 두 라이브러리를 사용하게 되면 클래스 컴포넌트 스타일을 통한 개발에 유용하고 가독성 측면에서도 좀 더 좋은 것 같습니다.
아래에 좀 유익한 자료 몇가지 첨부해 두니 참고하시면 좋을 듯 합니다.

참고자료
https://ui.toast.com/weekly-pick/ko_20190327
https://github.com/vuejs/vue-class-component
http://ccambo.github.io/Dev/Vue/6.How-to-use-vue-property-decorator/