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

今回試してる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であれば以下のようなエラーを出してくれる