Its possible define component with generic type?

[martinsura]

What problem does this feature solve?

Hello, first -> thanks for the Vue3. Its Awesome.

In my previous project I often use typescript generic. For example:

const CustomButton = defineComponent({
  props: {
    clickRequest:Function as PropType<(r?: Promise<any>) => void>,
    onClick: Function as PropType<(data:any) => void>
  },
  emits:["click"],
  setup(props, { emit }) {
    const internalClick = async () => {
      const data = await props.clickRequest()
      emit("click",data);
    }
    return () => {
      <button onClick={internalClick}>Action</button>
    }
  }
})

This example works as expected. Problem is any type around props definition.

What does the proposed API look like?

const CustomButton = defineComponent<T>({
  props: {
    clickRequest:Function as PropType<(r?: Promise<T>) => void>,
    onClick: Function as PropType<(data:T) => void>
  },
  emits:["click"],
  setup(props, { emit }) {
    const internalClick = async () => {
      const data = await props.clickRequest()
      emit("click",data as T);
    }
    return () => {
      <button onClick={internalClick}>Action</button>
    }
  }
})

Thanks

[Zcating]

As work around, You can do this to provide a generic type.

const GenericComponent = <T>() => defineComponent({
  // add your defination.
});

Also you can declare a class component

export declare class GenericComponent<T> {
  // add your defination
}

[posva]

Since you could define a component with as many generics as you want, you will have to use a function like proposed above:

function defineGenericComponent<T, D>() {
  return defineComponent({ ... })
}

---

Remember to use the forum or the Discord chat to ask questions!

[pikax]

For future reference RFC to allow this