TypeScriptでVue.jpのLateinitを実装する

TypeScriptでVue.jpのLateinitを実装する:

背景

TypeScript+vue-class-component環境の場合

createdやmountedなどを使った時など

stateに一旦nullなどで初期化する必要があります。この時、本来nullが有り得ない場合でも型定義でnullなどを許容せざるを得ません。これを改善するためにメソッドを定義しました。

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