Can I refer to the other prop inside a prop?

[sheremet-va]

Can I do something like this using Volar, and get the auto-completion and type checking support?

interface MyObject {
   [key: string]: any
}

defineComponent({
  props: {
    value: Object as PropType<T extends MyObject>,
    key: String as PropType<keyof T>
  }
})

[sheremet-va]

Looks interesting. I'm gonna use it!

But it would be cool if we could use some kind of type enhancement like with __VLS_slots (I know you will replace them in the future tho).

[sheremet-va]

Also it doesn't work if I want to use the child component multiple times with different objects. :(

[johnsoncodehk]

@sheremet-va I avoid to create more __VLS_..., because this is a volar-specific thing.

[johnsoncodehk]

Also has a type-only way, it should be support reuse the child component. A challenge is how to define DefineComponent<...> correctly.

// child.vue
import { defineComponent, PropType } from 'vue'

interface MyObject {
  [key: string]: any
}

export default defineComponent({
  props: {
    value: Object as PropType<MyObject>,
    key: String as PropType<keyof MyObject>
  },
}) as ChildType<MyObject>;

export type ChildType<T extends MyObject> = DefineComponent<{
  value: PropType<T>,
  key: PropType<keyof T>,
}>;

// parent.vue
import { defineComponent } from 'vue'
import Child, { ChildType } from './child.vue'

export default defineComponent({
  components: {
    Child: Child as ChildType<{ foo: string, bar: number }>
  }
})

[sheremet-va]

to reuse it you suggest defining component multiple times? like

export default defineComponent({
  components: {
     ChildOne: Child as ChildType<{ foo: string }>,
     ChildeTwo: Child as ChildType<{ bar: number}>
  }
})

[johnsoncodehk]

Sorry I misunderstood your "reuse" mean, yes you have to do it. :P

Your request is generic type component, I think it's worth to open a discussion in https://github.com/vuejs/rfcs/discussions.

[sheremet-va]

Hello again! I found myself using new script setup sugar (which is still an rfc, I know) a lot, and I was wondering if I can get the same type checking and autocomplete using script setup syntax?

Even with some hacks?

[johnsoncodehk]

Yes it's similar.

// child.vue
<script lang="ts" setup>
defineProps({
  value: Object as PropType<MyObject>,
  key: String as PropType<keyof MyObject>
});
</script>

<script lang="ts">
import type { DefineComponent, PropType } from 'vue'
import { defineProps } from 'vue'

interface MyObject {
  [key: string]: any
}

export type ChildType<T extends MyObject> = DefineComponent<{
  value: PropType<T>,
  key: PropType<keyof T>,
}>;
</script>

// parent.vue
<script lang="ts" setup>
import Child from './child.vue'
import type { ChildType } from './child.vue'

const ChildOne = Child as any as ChildType<{ foo: string }>;
const ChildTwo = Child as any as ChildType<{ bar: number }>;
</script>

[sheremet-va]

Thank you very much! For your answers and for your awesome work. 👍👏

[sheremet-va]

Good day, Johnson! ! It's me again! (haha)

This approach works really well with props, but I lost all my slot's types. Can I fix this somehow? And also include generics inside them? Or is this a Volar specific feature and there is nothing I can do?

[johnsoncodehk]

Volar define template slots types to __VLS_slots, so you can steal this type.

const ChildOne = Child as any as ChildType<{ foo: string }> & { __VLS_slots: typeof Child['__VLS_slots'] };

If with generics, you need to define it with ChileType.

export type ChildType<T extends MyObject> = DefineComponent<{
    value: PropType<T>,
    key: PropType<keyof T>,
}> & {
    __VLS_slots: {
        mySlot: {
            slotValue: T,
            slotKey: keyof T,
        }
    }
};

How your problems funny. 🤣

[sheremet-va]

How your problems funny. 🤣

Yeah, experiments, experiments! Just trying to make the most type safe component 🌝

If with generics, you need to define it with ChileType.

Thank you! Works very well.

[Evertt]

@johnsoncodehk your code brought me so close to what I need and I'm super grateful. Would you be willing to see if you can help me the last 5%?

Right now I have this:

export type VTablesType<T extends () => Api> = DefineComponent<
  Modify<Props, {api: T}>
> & {
  __VLS_slots: {
    reference: { row: UnwrapRef<ReturnType<T>["data"]> }
  }
}

And it's allowing me to use a slot like this:

<template #reference="{row}">
    <span>{{ row.reference }}</span>
</template>

And row is correctly typed there. Now the thing is, in my particular case, I know that ALL slots will give the same data type. And I have A LOT of slots. So many that it would be super tedious to add them all separately to __VLS_slots. So I hoped I could fix that by writing it like so:

__VLS_slots: {
   [key: string]: { row: UnwrapRef<ReturnType<T>["data"]> }
}

But unfortunately that doesn't work, then every slot says their data is any again...
Do you have any idea how I could achieve this? I would be so grateful 🙏

[johnsoncodehk]

@Evertt this comment may helps: #877 (comment)

Please note that with #1108, we will not support __VLS_slots any more, please use $slots instead of.

[johnsoncodehk]

@sheremet-va cc: vuejs/rfcs#310

[johnsoncodehk]

Generic functional component already supported in v0.25.2.

// child.vue
<script lang="ts">
import { h } from "vue";

const Comp = <T extends object>(props: {
  items: T;
  keys?: keyof T;
}) => h({}, props);

export default Comp;
</script>

<template>
  <Child :items="{ foo: '' }" keys="foo" />
  <Child :items="{ foo: '' }" keys="bar" /> <!-- Type '"bar"' is not assignable to type '"foo" | undefined' -->
</template>

<script lang="ts" setup>
import Child from './child.vue'
</script>

[sheremet-va]

It’s sad I don’t use those, but thank you for heads up

[rndmerle]

Thanks for the help.
My not-pretty temporary fix for our Vue 2 project is this for now:

components: {
    // to get v-slot="{ item }" typed
    MyGenericComponent: MyGenericComponent as typeof MyGenericComponent & {
      __VLS_slots: {
        default: { item: ItemType }
      }
    }