Typesafety on useOverlay props

[schillerenrico]

Description

Currently when I use useOverlay and pass props it says props is type any. by adding satisfies InstanceType<typeof COMPONENT>["$props"] it gets the right types.

But it should work out of the box. Could the typesafety for props be implemented?

current solution

          useOverlay()
            .create(COMPONENT, {
              props: {
                id: id,
                onUpdated() {
...
                },
              } satisfies InstanceType<typeof COMPONENT>["$props"],
            })
            .open();

Additional context

Something like this could create type safety

function createTypedOverlay<T extends new (...args: any) => any>(
  component: T,
  options: {
    props: InstanceType<T>["$props"];
    [key: string]: any;
  }
) {
  return useOverlay().create(component, options);
}

[schillerenrico]

@genu :)

[genu]

You should already be getting proper type safety for props 🤔

If not, it may be a bug.

[genu]

Please share a repro if possible.

[schillerenrico]

@genu thanks for your reply - here is a repo where you can see that props is of type any but using satisfies or a typed function it works https://codesandbox.io/p/devbox/youthful-framework-crq75r

[genu]

Could you try adding vue-component-type-helpers as a dev dependency and see if it solves the issue?

pnpm add vue-component-type-helpers -D

[schillerenrico]

@genu yeah now its typed correctly

[genu]

@benjamincanac we need to ensure that vue-component-type-helpers dependency is included when the module is installed.

I know this was working before, maybe something changed.