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

[last-partizan]

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.

[JorisAerts]

I ran into the next few issues when upgrading from 2.6 to 2.7.3.

return createElement(
      VSwitch,
      {
            on: this.$listeners
      }
)

this.$listeners seems broken:
⚠️ TS2322: Type 'unknown' is not assignable to type '{ [key: string]: Function | Function[]; } | undefined'.

---

export default defineComponent({
  name: 'x-expansion-panel-header',
  extends: VExpansionPanelHeader,
})

extends suddenly behaves differently:
⚠️ Type 'VueConstructor' has no properties in common with type 'ComponentOptionsBase<any, any, any, any, any, any, any, any, any, any>'.

---

createElement('div', { props }, [...this.$slots.default])

this.$slots.default doens't behave the same anymore:
⚠️ TS2345: Argument of type 'Slot | undefined' is not assignable to parameter of type 'VNodeChildren'.   Type 'Slot' is not assignable to type 'VNodeChildren'.

---

export default defineComponent({
  ...
  methods: {
    wrapWithLabel(): VNode {
      ...
      return this.$createElement(XFormLabel, { props }, children)
    },
  },
}

this.$createElement is not accessible anymore:
⚠️ TS2571: Object is of type 'unknown'.

[chearon]

I can't get props to infer to anything other than any or never either. Simple repro here: vuejs/language-tools#1537

[JorisAerts]

I can't get props to infer to anything other than any or never either. Simple repro here: johnsoncodehk/volar#1537

I define properties like:

{
  props: {
    thestring: { type: String } as PropOptions<string | undefined>
  },
}

And that seems to infer correctly.

[chearon]

Thanks, but I still see any. I tried PropType<string | undefined> too.

[yyx990803]

closed via 1d5a411
@JorisAerts your issues should be fixed by d3add06 & f8de4ca

[JorisAerts]

closed via 1d5a411 @JorisAerts your issues should be fixed by d3add06 & f8de4ca

Great, thanks!

[last-partizan]

Thanks, 1d5a411 is indeed fixed case when component is App: defineComponent({}), but it did not fix case when component is imported from another file, like:

import App from "./App.vue";

I've updated vue to 2.7.4 in my example repo, error is still here.
https://github.com/last-partizan/vue-examples/tree/f2c659c3757a2457d344cc5786031a1298de35a1

[last-partizan]

@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

[johuhype]

For components that do not use props, it is possible to fix this by putting the data() part at the very bottom of the defineComponent statement.
For component with props, I did not manage to use it at all yet.

[Ansett]

We just made the move to replace all data() references by refs in setup() in our old components.
It was tedious but it's a step forward migration :p
No issue with methods' typing when there is no data(), even when there are props

[eeedvisss]

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:

This works(arrow function for data prop):

And this works(data moved after methods):

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

[jorisvergeer]

I also have this problem, also changing the data to an arrow function works around it but then i cannot acces props in the data function:

Type inference is also broken when the data arrow function has an this argument:

Only works with data arrow function without this zrgument:

[axetroy]

This bug still exists in 2.7.14

[asmaloney]

Just ran into this with 2.7.14 as well.

A lot of instances of error TS2339.

I tried all the solutions here. Replacing data(): Data { with data: (): Data => { solved the TS2339 errors, but then I can't reference this in the data section.

If I follow the vue 2 docs and take instance as a param (data: (instance): Data => {), then that works, but it breaks with TS2339 errors again.

So I have exactly the same problem as @jorisvergeer mentions above.

I feel like I'm going around in circles and cannot figure out how to make this work. Is there a working solution somewhere?

[drew-royster]

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

[gcaaa31928]

I think we should reopen this issue ?

[zcf0508]

#13063

[tskimmett]

Still experiencing this issue. Moving data after methods or using an arrow function for data works around the issue. Very odd.

[backrunner]

Still got lots of TS2339 errors in 2.7.16, seems like this problem won't be fixed anymore...