vue: [2.7.x] [typescript] Type inference breaks under specific circumstances

Version

2.7.3

Reproduction link

github.com

Or just create this file in minimal vue-ts (v2) project

import {defineComponent} from "vue";
// Replace vue import with this, and it woks fine.
//import {defineComponent} from "@vue/composition-api";

import App from "./App.vue";

export default defineComponent({
  components: {
    App,
  },
  data() {
    return {};
  },
  provide(): any {
    return {
      fetchData: this.fetchData,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      throw new Error("Not implemented.");
    },
  },
});

Steps to reproduce

Clone example repo, run pnpm install, run pnpm vue-tsc --noEmit

What is expected?

No errors.

What is actually happening?

Has ts errors.

src/broken-method-type.ts:15:23 - error TS2339: Property 'fetchData' does not exist on type 'CreateComponentPublicInstance<{}, unknown, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.

15       fetchData: this.fetchData,
                         ~~~~~~~~~

src/broken-method-type.ts:19:10 - error TS2339: Property 'fetchData' does not exist on type 'CreateComponentPublicInstance<{}, unknown, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.

19     this.fetchData();
            ~~~~~~~~~


Found 2 errors in the same file, starting at: src/broken-method-type.ts:15

I’m updating our app from vue-2.6 + @vue/composition-api to vue-2.7, and after update i see many type checking erros.

If you replace import from “vue” to import from “@vue/composition-api”, it works fine.

If you remove data or components, it works fine.

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Comments: 19 (4 by maintainers)

Commits related to this issue

Most upvoted comments

I think we should reopen this issue ?

This is still broken for me in 2.7.14 and I installed vue-tsc ^1.2.0

@yyx990803 please reopen this, it isn’t fixed yet.

https://github.com/last-partizan/vue-examples/tree/11c64acb67a3aaba788f6e4275405b2cc37d1f5a

With 2.7.5 error is still here.

pnpm vue-tsc
src/broken-method-type.ts:16:23 - error TS2339: Property 'fetchData' does not exist on type 'CreateComponentPublicInstance<{}, unknown, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.

16       fetchData: this.fetchData,
                         ~~~~~~~~~

src/broken-method-type.ts:20:10 - error TS2339: Property 'fetchData' does not exist on type 'CreateComponentPublicInstance<{}, unknown, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.

20     this.fetchData();
            ~~~~~~~~~


Found 2 errors in the same file, starting at: src/broken-method-type.ts:16

We can confirm that after moving from 2.6 + composition-api to 2.7 types in methods only work if we move data property to the bottom(after methods) or change data to arrow function:

This doesn’t work anymore: image

This works(arrow function for data prop): image

And this works(data moved after methods): image

Are we missing something here? Or is this a bug in type support?

closed via 1d5a411c @JorisAerts your issues should be fixed by d3add06e & f8de4ca9