Data properties not found and/or incorrectly typed in TypeScript 3.6.2

[kjleitz]

Version

2.6.10

Reproduction link

https://jsfiddle.net/keegan_openbay/nhvemx32/ (be aware that JSFiddle does not show TypeScript compiler errors)

Steps to reproduce

• use TypeScript >= 3.6.1-beta (currently stable at 3.6.2)
• have at least one prop
• correctly type all your methods
• use a non-string data property in your component options

What is expected?

Normal behavior; the data property is correctly typed and found on the instance.

What is actually happening?

Errors arise because:

• in methods, the data properties are not found on the component type.
• in watch, the data properties are typed string | WatchOptionsWithHandler<any> | WatchHandler<any>.
• in computed, the data properties are typed (() => any) | ComputedOptions<any>.

---

[posva]

It's indeed not working anymore while it was on 3.5.3. Not sure if it's an upstream problem or not but something broke in our types

[ktsn]

I'm just looking into it. Still not sure whether it's upstream bug or not. But annotating data's this type can be a workaround:

data(this: any): { loading: boolean; fade: boolean } {
  // ...
}

[ktsn]

I've filed it on TypeScript repo.
microsoft/TypeScript#33164

[ktsn]

TypeScript v3.6.3 has been released and it solves this issue.

[dasDaniel]

I'm still seeing this with TypeScript 4.5.5 on vue 2.6.14

my workaround is to use (this as Vue) instead of this

for example

watch:{
  myVar(){
    (this as Vue).myMethod()
  }
}

with a component definition (in the same file) like:

declare module "vue/types/vue" {
  interface Vue {
    myMethod: () => void
  }
}