Property 'xxx' does not exist on type CombinedVueInstance ?

[SunshowerC]

Version

2.5.17

Reproduction link

Steps to reproduce

1. use vue-cli init a ts hello-world project .
2. code like that

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "HelloWorld",
  props: {
    msg: String
  },
  data():any {
    return {
      wtf: this.initData(), // throw ts error : Property 'initData' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ msg: string; }>>'.
    }
  },
 
  methods: {
    initData():any {
        return {
          a: ''
        }
    },
  },
 
});
</script>

What is expected?

How can i fix it ?

What is actually happening?

Property 'initData' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ msg: string; }>>'.

[KaelWD]

It seems to be intentional, I guess so you can't accidentally access computed properties via a method?

vue/types/options.d.ts

Line 34 in 3b43c81

type DataDef<Data, Props, V> = Data | ((this: Readonly<Props> & V) => Data)

edit: 540a38f, #5887 (comment)

[SunshowerC]

I don't understand. What bad would happen if i access computed properties via a method ?

[KaelWD]

They don't exist yet: https://codepen.io/kaelwd/pen/pOErZw?editors=0011

[SunshowerC]

Uh... I didn't use computed property, just use a method function, and the methods does exist in data.

And I may turn to vue-class-component instead of Vue.extend, the native vue is still not so friendly to typescript (Maybe just because i am not so proficient in vue). Anyway, thanks for helping me.

[KaelWD]

Yeah I know, it is a bit silly. Just a guess as to why they might've done that.

[zhuscat]

Same here.

"vue": "^2.5.17"

"typescript": "^3.0.0"

Is there any way to access methods in data function?

[brandoncash]

Since this appears to be only a typing issue and not a runtime issue, there is an (ugly?) workaround available: cast this as type any:

return {
  wtf: (this as any).initData(),
};

Additionally omit the () to store a reference to the method that is executable outside of the current scope, e.g. if you pass it to a child via a prop.

[mms-]

Same here. Vue 2.5 has better type declaration support for TypeScript but this seems broken.

[gcollombet]

Same problem for me

[ktsn]

I guess we should remove this type from data option function and make it as the same as other function this type. The use case that OP provides looks totally valid.

I also faced another use case which I need comprehensive this type in data function when writing some function in it.

data() {
  return {
    someFunc: () => {
      this.someComputed() // `this` type here should be comprehensive
    }
  }
}

As a similar case, this type of beforeCreate seems also to be removed.

But they probably breaks existing apps type checking as we need to explicitly declare data function return type since it no longer infers return type of data due to this restriction. I'm not sure how much the change affects the existing apps...

[nextprops]

vue-tsx-support

[JoshZA]

👍