Vue TypeScriptでthisの型が推論できない件

TypeScriptでVueを記述していた時、this.propertyの参照が

Property 'property' does not exist on type

のようなエラーが出て、buildに失敗するような挙動になりました。

Vueインスタンスとしてコンポーネントを定義する

export default {
  name: 'myPage',
  data () {
    return {
      clicked: false
    }
  },
  methods: {
    objClick: function (event:any) {
      // Property 'clicked' does not exist on type
      this.clicked = !this.clicked
    }
}

これのexport defaultを

import Vue from 'vue'

export default Vue.extend({
  name: 'myPage',
  data () {
    return {
      clicked: false
    }
  },
  methods: {
    objClick: function (event:any) {
      this.clicked = !this.clicked
    }
})

とすることで型推論できるようになりました。

以下は非推奨な対応

thisの型をany型として扱う

どうやら、thisの型推論がうまくできてないようで、以下のようにthisをany型として伝えることでエラー表示を解消しました。

export default {
  name: 'myPage',
  data () {
    return {
      clicked: false
    }
  },
  methods: {
    objClick: function (event:any) {
      let self:any = this //any型として扱う
      self.clicked = !self.clicked
    }
}

また、型推論を行わないように、

// @ts-ignore
this.clicked = !this.clicked

としても警告は消せます。

dataTypeを指定できれば、解決できるかなと思って、

interface DataType {
  clicked: false
}
export default {
  name: 'myPage',
  data (): DataType {
    return {
      clicked: false
    }
  },
  methods: {
    objClick: function (event:any) {
      let self:DataType = this //any型として扱う
      self.clicked = !self.clicked
    }
}

としてみたのですが、うまく動作しなかった。

というかclassベースで書くようにしよう(^_^;)

Vue.js to TypeScriptの書き方一覧 - Qiita