Support for props extraction on .vue

[pikax]

When you want to infer props from a base component, volar currently can't infer the props types (vuedx currently works)

This code works in typescript

const TestBase = defineComponent({
  props: {
    show: Boolean,
    title: String,
  },
});

type TestBaseType = typeof TestBase extends DefineComponent<
  infer Props,
  any,
  any,
  any,
  any,
  any,
  any,
  any
>
  ? Props
  : {};

const Child = defineComponent({
  props: {
    // props contains the props options
    ...(TestBase.props as TestBaseType),

    extra: String,
  },
  setup(props) {
    let i: boolean = props.show; // boolean
  },
});

But as soon as you separate into SFC types, the type gets lost:

// test.vue
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    show: Boolean,
    title: String,
  },
});
</script>

// Child.vue
<script lang="ts">
import { defineComponent } from 'vue';
import TestBase from './test.vue'

type TestBaseType = typeof TestBase extends DefineComponent<
  infer Props,
  any,
  any,
  any,
  any,
  any,
  any,
  any
>
  ? Props
  : {};

export default defineComponent({
  props: {
    // props contains the props options
    ...(TestBase.props as TestBaseType),

    extra: String,
  },
  setup(props) {
    // does not work beacuse TestBaseType will be `{}`
    let i: boolean = props.show; // boolean
  },
});
</script>

[johnsoncodehk]

This is the design limit for now, because TestBase types is:

DefineComponent<...> & {
  __VLS_raw: DefineComponent<...>, // raw type
  __VLS_options: ..., // for template components, props, emits services
  __VLS_slots: ..., // for slots services
}

So it can't infer extends as DefineComponent. A simple reproduce:

const a = defineComponent({
  props: {
    show: Boolean,
    title: String,
  },
});
type A = typeof a & { __VLS_foo: any }
// We want B is true, but it's false
type B = A extends DefineComponent<
  infer _,
  any,
  any,
  any,
  any,
  any,
  any,
  any
> ? true : false;

If you accept a hack way, you can use typeof TestBase['__VLS_raw'] for now.

[pikax]

Will use that for now, do you think if the typed slots are implemented + GlobalComponents, will you still have the need of having?

DefineComponent<...> & {
  __VLS_raw: DefineComponent<...>, // raw type
  __VLS_options: ..., // for template components, props, emits services
  __VLS_slots: ..., // for slots services
}

[johnsoncodehk]

@pikax Yes it will better, but still need to use this way to support vue 2 / class component.

I will find a way to handle this problem. (The most extreme case I can create double typescript language service instances, half for <script>, half for <template>. :P)

[lanyizi]

I'm not sure if this bug has already been fixed, but the following one seems to be working:

import { ComponentOptions } from 'vue'
import Sfc from 'Sfc.vue'

type ExtractProp<Type> = Type extends ComponentOptions<infer Props>
  ? Props
  : never
type SfcProps = ExtractProp<typeof Sfc>;

[johnsoncodehk]

@lanyizi not yet, but this problem may only occur with extends DefineComponent.

[johnsoncodehk]

Fixed in [email protected] and [email protected].

[franco-onevillas]

Hey there, is it possible nowadays to infer types from a .vue file? I'm stuck in this exact case. Thanks!