Lacking TS support

[J-Michalek]

I started using PrimeVue inside of a TS project and since most of the components allow any as prop type I find the type control lacking.

To improve this I decided to create wrapper component above the PrimeVue components which would provide a bridge where I would create all the types using generics or just typing it to a value that I expect it to be, but I am unable to do that with some components because they use very complicated types that the Vue compiler cannot handle.

Example

I will use the Button component as an example. The reason for me to do this is to easily extend the button with anything I need i.e. tooltips while still providing the same interface as the original Button component.

<template>
  <Button v-bind="props">
    <template v-for="slotName of slotNames" #[slotName]="slotProps">
      <!-- Using Object.assign to not break syntax highlighting with v-bind="slotProps as any". -->
      <slot :name="slotName" v-bind="Object.assign((slotProps ?? {}) as any)" />
    </template>
  </Button>
</template>

<script setup lang="ts">
import type { ButtonProps, ButtonSlots } from "primevue";
import { Button } from "primevue";

const props = defineProps<ButtonProps>(); // This will fail, because Vue compiler cannot handle the types
const slots = defineSlots<ButtonSlots>();

const slotNames =  computed(
    () => Object.keys(slots) as (keyof ButtonSlots)[],
  );
</script>

The example won't work because the ButtonProps interface extends ButtonHTMLAttributes and the Vue compiler cannot handle that, also it seems wrong to me to use the ButtonHTMLAttributes interface because the button might not event end up being a button element when using the as prop.

I have some ideas to improve on this, but I decided that I would first create a discussion around it as to not waste my time with changes that might not event be considered.