Edited at

クラススタイル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
}
}