Add support of PropType checking in Vue 2

[LurkingExorcist]

Thank you for very useful extension, it helps me a lot.
And it would be more helpful if you add PropType checking like when project uses vue 3.
Currently this feature doesn't support vue 2 projects :(

[johnsoncodehk]

hi @Hope410, you already can use PropType form @vue/composition-api module. I'm not sure which part you are missing, so here is a example:

import { defineComponent, PropType } from '@vue/composition-api'

export default defineComponent({
  props: {
    foo: Object as PropType<AnyTypeYouWant>
  }
})

[LurkingExorcist]

hi @Hope410, you already can use PropType form @vue/composition-api module. I'm not sure which part you are missing, so here is a example:

I use PropType from vue import and don't use defineComponent from @vue/composition-api.

[johnsoncodehk]

have you try defineComponent? as I know PropType only work for defineComponent, but not Vue.extend.

[LurkingExorcist]

as I know PropType only work for defineComponent, but not Vue.extend.

PropType from vue works as well.

So, i used defineComponent, and prop type infered correctly, thanks. But could you add support of Vue.extend? It would be very helpful for vue2 + typescript users, i think most of them use Vue.extend

[johnsoncodehk]

We need $props types for element props type-checking, PropType from vue can only work for this type inside Vue.extend({ ... }), but not working for $props:

import Vue, { PropType } from 'vue';

const A = Vue.extend({
  props: {
    foo: String,
  },
  mounted() {
    this.foo // string
  }
});
const a = new A();

a.$props.foo // any

check the source code, Vue.extend seem do nothing for $props types infer: https://github.com/vuejs/vue/blob/5255841aaff441d275122b4abfb099b881de7cb5/types/vue.d.ts#L34

I'm not sure dose they have plan to improve Vue.extend types or not, anyway this is upstream problem.

[LurkingExorcist]

I understood, anyway, thank you!

[dynamite-ready]

Somehow, Prop checking worked for me in Vue 2 (Nuxt), while using Vue.extends({}):

The docs for Volar say this shouldn't work, no?
This seems great for now, but can I always count on this behaviour?

[johnsoncodehk]

@dynamite-ready The type inference provided by Vue.extend is very limited. For example, cross-component props type-checking is not supported.