Vuejs type inference does not work with TS 3.4.x

Version

2.6.10

Reproduction link

https://github.com/Patcher56/ts3.4.x-vuejs-issue

Steps to reproduce

1. create a new vue typescript project (without class syntax) vue create test-ts
2. open src/components/HelloWorld.vue
3. add a data variable and try to access it in a computed property

What is expected?

No errors (as the data is defined)

What is actually happening?

Typescript error 2339 telling me Property 'test' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ msg: string; }>>'.

---

I think this has something to do with the changed type inference in Typescript 3.4.x.

Important: Change vetur settings to use workspace dependencies to show errors directly in vscode, else you will only get the error when using yarn serve.

[pikax]

One workaround is assigning a return type to computed

type TypedDef<Data, Computed> =
  ComponentOptions<Data, Computed> &
  ThisType<Data & Computed>

type DataDef<Data> = () => Data

export interface ComponentOptions<Data, Computed> {
  data?: DataDef<Data>
  computed?: Accessors<Computed>
}
export type Accessors<T> = {
  [K in keyof T]: () => T[K]
}

declare function component<Data, Computed>(def: TypedDef<Data, Computed>): void;

component({
  data() {
    return {
      foo: 23
    }
  },
  computed: {
    bar(): number { // adding the return type, seems to solve the error
      return this.foo + 1
    }
  }
})

[p-kuen]

Best workaround is to use the new Vue Composition API. It is a lot cleaner for typescript and works also with typescript versions > 3.3.4000.