Error when referencing props in component class or component methods from watchers

To Reproduce

Create a new project with vue-cli and select Typescript and Class components as features

update HelloWorld.vue script section to

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"

@Component({
  props: {
    msg: String
  },
  watch: {
    msg: function () {
      this.printMessage()
    }
  }
})
export default class HelloWorld extends Vue {
  printMessage() {
    console.log(this.msg)
  }
}
</script>

Compile error

ERROR in /Users/tohe/Projects/test-class-component/src/components/HelloWorld.vue
40:12 Property 'printMessage' does not exist on type 'Vue'.
    38 |   watch: {
    39 |     msg: function () {
  > 40 |       this.printMessage()
       |            ^
    41 |     }
    42 |   }
    43 | })
ERROR in /Users/tohe/Projects/test-class-component/src/components/HelloWorld.vue
46:22 Property 'msg' does not exist on type 'HelloWorld'.
    44 | export default class HelloWorld extends Vue {
    45 |   printMessage() {
  > 46 |     console.log(this.msg)
       |                      ^
    47 |   }
    48 | }
    49 | </script>

Versions

vue-cli 2.9.3 vue-class-component 6.1.2

[ktsn]

Please declare the props type as class properties and annotate your component type on @Component decorator or use vue-property-decorator.

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"

@Component<HelloWorld>({
  props: {
    msg: String
  },
  watch: {
    msg: function () {
      this.printMessage()
    }
  }
})
export default class HelloWorld extends Vue {
  msg: string

  printMessage() {
    console.log(this.msg)
  }
}
</script>

[LukasBombach]

Oh, I just found a fix. Do this:

export default class LightSwitch extends Vue {
  @Prop()
  public id!: number;
}

don’t miss the ! after id