クラススタイルVueコンポーネントの変数初期化を改善する

背景

TypeScript+vue-class-component環境でcreatedやmountedなどでstateを初期化する場合、クラスの初期化時に一旦stateにnullなどの値を入れる必要があります(これをしないとstateの変更が監視されません)。この時、本来nullが有り得ない場合でも型定義でnullなどを許容せざるを得ません。これを改善するために、Kotlinのlateinitを参考にしてデコレータを作ってみました。

export const LateInit = createDecorator((options, key) => {
  options.mixins = [
    ...options.mixins || [],
    {
      data(this: Vue) {
        return {
          [key]: null
        }
      }
    }
  ]
}

コンポーネントでは以下のように使います。

export default class SomeComponent extends Vue {
  @Lateinit
  windowWidth!: number

  mounted() {
    this.windowWidth = window.innerWidth
  }
}