Edited at

Vue.jsのdataオプションで型を宣言的に書く方法

More than 1 year has passed since last update.

今回試してるVue.jsのバージョンは2.5で

vue-class-componentを使わず、Thisの型推論ができるコードを対象にしている

(また、strictもしくはnoImplicitThisをtrueにする必要あり)


宣言的でない例

以下の場合、dataオプションでcountの初期値に0を指定しているため、

addCount内でthis.countはnumber型と解釈される

export default Vue.extend({

data() {
return {
count: 0
}
},
computed: {
addCount() {
this.count += 1
}
},
created() {
this.addCount
console.log(this.count) // 1が出力される
}
})

よって、以下のようにcountを'a'に変更すると、this.countはstring型と解釈される

当然結果も文字列結合となり、a1と出力されてしまう

export default Vue.extend({

data() {
return {
count: 'a'
}
},
computed: {
addCount() {
this.count += 1
}
},
created() {
this.addCount
console.log(this.count) // a1が出力される
}
})

この結果は予期せぬ結果かもしれないので、コンパイル時に気付けるようにしたい


dataオプション内のプロパティの型を宣言的に書く

dataオプションを以下のように書くことで、countがnumber型であると明示的に書ける

単純にdataオプションは関数なので、その戻り値の型を定義してあげてるだけ

export default Vue.extend({

data(): {
count: number
} {
return {
count: 0
}
},
computed: {
addCount() {
this.count += 1
}
},
created() {
this.addCount
console.log(this.count) // 1が出力される
}
})

先程の例のようにcountに'a'などnumber型以外の値を設定しようとするとコンパイルエラーになる

VSCodeであれば以下のようなエラーを出してくれる

 2018-05-01 18.54.13.png