Typescript Issue

[JeremyBYU]

I am trying to run your example with with Typescript 1.8 but am having issues. I get the error while compiling:

Offending Line: 
  get computedMsg () {
    return 'computed ' + this.msg
  }
[ts] Property 'msg' does not exist on type 'Greeter'.
any

I remove the offending line, it compile fine, and I use chrome dev tools to see if msg exists on the this object. It does, your decorator worked just fine! So for some reason its like the typescript compiler doesnt understand that the msg proeprty will be created by the decorator and stops compilation (stops, this is not a warning).

Anyways, I cloned the repo and ran your example (it uses babel, not typescript) and had no issues with your class-component decorator.

Just wondering if I am doing something wrong, any typescript example with this decorator?

[JeremyBYU]

Just found a small workaround that worked for me. Let me know if there is a better way.
Workaround: Declare a static property matching the data property name

@Component({
  props: {
    propMessage: String
  },
  template: `
    <div>
      <input v-model="msg">
      <p>prop: {{propMessage}}</p>
      <p>msg: {{msg}}</p>
      <p>computed msg: {{computedMsg}}</p>
      <button @click="greet">Greet</button>
    </div>
  `
})
export default class Greeter {
  msg // THIS IS THE FIX HERE
  // return initial data
  data () {
    return {
      msg: 123
    }
  }

  // lifecycle hook
  ready () {
    this.greet()
  }
  // get msg () {
  //   return 1
  // }
  // computed
  get computedMsg () {
    return 'computed ' + this.msg
  }

  // method
  greet () {
    alert('greeting: ' + this.msg)
  }
}

Update: Looks like its straightup Typescirpt design issue. They expected all constructor variables to be declared in the class: Link

This means anything your decorator attaches to this needs to be declared. E.g. props, data, and maybe vuex getter and actions?