Typing: Props not bound to this

[octref]

Version

Vue: 2.6.10
TS: 3.3.4000 and 3.4.5

Reproduction link

https://github.com/octref/vue-prop-type-error

Steps to reproduce

• git clone https://github.com/octref/vue-prop-type-error && cd vue-prop-type-error
• yarn
• yarn compile

What is expected?

No error reported from this file

import Vue from 'vue'

const foo = Vue.extend({
  props: {
    a: Array,
    s: String,
    b: Boolean
  },
  created() {
    console.log(this.a)
    console.log(this.s)
    console.log(this.b)
  }
})

What is actually happening?

a, s, b are not bound to this instance

index.ts:10:22 - error TS2339: Property 'a' does not exist on type 'ComponentOptions<Vue, DefaultDat
a<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, a
ny>>'.

10     console.log(this.a)
                        ~

index.ts:11:22 - error TS2339: Property 's' does not exist on type 'ComponentOptions<Vue, DefaultDat
a<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, a
ny>>'.

11     console.log(this.s)
                        ~

index.ts:12:22 - error TS2339: Property 'b' does not exist on type 'ComponentOptions<Vue, DefaultDat
a<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>>'.

12     console.log(this.b)
                        ~


Found 3 errors.

[jackkoppa]

Perhaps a duplicate of #9873

Both root causes seem to be from this TypeScript issue: microsoft/TypeScript#30854

[dodas]

It is clear how to fix this in case of computed properties, but what should we do in this case?

[p-kuen]

I had this issue a couple of times. This is mostly caused by the Array prop.
If you cast only the array prop, everything works fine, although it's very strange.

No errors using the following script:

import Vue from 'vue'

const foo = Vue.extend({
  props: {
    a: Array as () => any[],
    s: String,
    b: Boolean
  },
  created() {
    console.log(this.a)
    console.log(this.s)
    console.log(this.b)
  }
})

I think this is only working with TS <= 3.3.4000

[Domino9697]

@Patcher56 Indeed ! The issue comes from the Array prop. The problem is that in the VueJS type declaration files, all the JavaScript types (eg String, Number, Array) need to be translated to TypeScript types.

Now for some reason in the case of the Array prop, TypeScript infers it as a type that is "as general" as the any type. The wrong TypeScript Vue.extend overload is thus used (it uses the generic one without any props) leading all the props of your component not to be inferred by TypeScript.

My PR solves this issue by forcing the type coming from an Array prop to be of type any[].

[sem4phor]

For me the error occurs on not Array props too! See microsoft/TypeScript#30854 (comment)

[Domino9697]

By the way, this issue does not appear if you test it with TypeScript 3.5 (in development). Instead of having an array typed as any[], it will be typed as unknown[], thus solving this issue.

[ACVis]

This issue still occurs for me, with Arrays, while using TypeScript 3.5.3 and Vue 2.6.10. @Patcher56 workaround was the only thing that fixed it. Although, incredibly, it took me hours of googling to find this solution. Hopefully @Domino9697 's PR gets merged.

[sem4phor]

This might be related:
microsoft/TypeScript#30854

[ktsn]

This is already fixed on TypeScript >= 3.5.