Vuejs type inference does not work with TS 3.4.x

[p-kuen]

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.

[LinusBorg]

Seems to belong into the vetur repository then, right?

[p-kuen]

No, because the errors also appear in the terminal when using yarn serve.
Vetur is just responsible for showing me the errors directly in vscode.

patrick@patrick-Ubuntu:~/dev/test/test$ yarn serve
yarn run v1.15.2
$ vue-cli-service serve
 INFO  Starting development server...
Starting type checking service...
Using 1 worker with 2048MB memory limit
 98% after emitting CopyPlugin                                                 

 DONE  Compiled successfully in 2925ms                                                                                                                                        09:12:39

Type checking in progress...

  App running at:
  - Local:   http://localhost:8081/ 
  - Network: http://10.25.1.148:8081/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

ERROR in /home/patrick/dev/test/test/src/components/HelloWorld.vue
104:19 Property 'test' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{ msg: string; }>>'.
    102 |   computed: {
    103 |     testComp: function() {
  > 104 |       return this.test === false;
        |                   ^
    105 |     }
    106 |   }
    107 | });
Version: typescript 3.4.3
Time: 3161ms

[yyx990803]

/cc @HerringtonDarkholme @ktsn

[HerringtonDarkholme]

Looks like TS3.4 has multiple inference issue...

The minimal repro:

Vue.component('test', {
  data() {
    return {
      test: 123
    }
  },
  computed: {
    ttt() {
      return this.test + 1
    }
  },
})

Also spotted another failure:

The catch-all type signature of component

  component(id: string, definition?: ComponentOptions<V>): ExtendedVue<V, {}, {}, {}, {}>;

is causing union type to fail checking.

I need more time for investigation...

[DaKoala]

I wonder if properties in data are supposed to become properties of the instance when using TypeScript?

[LinusBorg]

Of course...

[mrozekma]

I filed the same bug against Typescript (microsoft/TypeScript#30854)

[HerringtonDarkholme]

Minimal repro:

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() {
      // return this.foo + 1 // comment out the return solves the problem
    }
  }
})

The problem seems to be cyclic inference issue. If the computed property doesn't reference data, the compiler error goes away.

I think it should goes to TypeScript's repo.

[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
    }
  }
})

[mrozekma]

One workaround is assigning a return type to computed

Good call. Just discovered that workaround is documented here.

[HerringtonDarkholme]

The best way to avoid the issue now is to annotate return type of computed method... We cannot make much progress since it is an upstream issue in TS.

[kjleitz]

The best way to avoid the issue now is to annotate return type of computed method... We cannot make much progress since it is an upstream issue in TS.

Unfortunately it also happens if you have a validator on a prop, and it isn't fixed with the annotation workaround:

export default Vue.extend({
  props: {
    foobar: {
      required: true,
      type: String,
      validator(foobar: string): boolean { return ['foo', 'bar'].includes(foobar); },
    },
  },

  data(): { initialFoobar: string } {
    return {
      initialFoobar: this.foobar, //=> Property 'foobar' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{}>>'
    };
  },

  computed: {
    foobang(): string {
      return `${this.foobar}!`; //=> Property 'foobar' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{}>>'
    },
  },
});

Breaks our entire build, easily 100+ errors after stepping up from TS v3.3.3333 to v3.4.4. Too bad, too, because this version of TS introduced some handy features for exactly what I'm working on right now... 😩

[kjleitz]

Also happens if you have a Function-type prop:

export default Vue.extend({
  props: {
    foobar: {
      required: true,
      type: String,
    },

    // With this, errors. Without this, no errors.
    someFunc: {
      required: true,
      type: Function,
    },
  },

  data(): { initialFoobar: string } {
    return {
      initialFoobar: this.foobar, //=> Property 'foobar' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{}>>'
    };
  },

  computed: {
    foobang(): string {
      return `${this.foobar}!`; //=> Property 'foobar' does not exist on type 'CombinedVueInstance<Vue, {}, {}, {}, Readonly<{}>>'
    },
  },
});