Typing: creating Teleport with h and RawSlots throws

[LeBenLeBen]

Version

3.0.2

Reproduction link

https://codesandbox.io/s/magical-brook-6vtfm?file=/src/components/HelloWorld.vue

Steps to reproduce

Create a Teleport VNode using h with an object of slots as third parameter, for example in a setup function:

setup() {
  return () => {
    h(
      Teleport,
      { to: "#portal" },
      {
        default() {
          return 'Child';
        },
      }
    );
  };
},

What is expected?

The code shouldn’t throw typing errors. At least that’s what I’m thinking since the code works, but I might be missing some edge-case problems this syntax could cause?

What is actually happening?

The following typing error is thrown by TypeScript:

semantic error TS2769: No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ new (): { $props: VNodeProps & TeleportProps; }; __isTeleport: true; }' is not assignable to parameter of type 'DefineComponent<{ to: string; }, {}, {}, Record<string, ComputedGetter<any> | WritableComputedOptions<any>>, MethodOptions, ... 6 more ..., {}>'.
      Type '{ new (): { $props: VNodeProps & TeleportProps; }; __isTeleport: true; }' is not assignable to type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Pick<Readonly<{} & { to?: string | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, "key" | ... 9 more ... | "to">; ... 10 more ...; $watch(source: string | Function, cb: Function, options?: ...'.
        Types of property '__isTeleport' are incompatible.
          Type 'true' is not assignable to type 'undefined'.

[Mister-Hope]

Do you have any workarounds better than (Teleport as unknown) as string? @LeBenLeBen

[LeBenLeBen]

It works with an array of slots instead of an object if you use the default slot only.

[lcoder]

same error

import { h, Teleport, defineAsyncComponent, FunctionalComponent, TeleportProps } from 'vue';

export const AsyncTeleport = defineAsyncComponent({
  loader: () => new Promise((r) => {
    const cp: FunctionalComponent<TeleportProps> = (props, ctx) => h(Teleport, props, ctx.slots);
    cp.props = ['to', 'disabled'];
    r(cp);
  }),
})

h( Teleport, ...) show error message：

No overload matches this call.
  The last overload gave the following error.
    Argument of type '{ new (): { $props: VNodeProps & TeleportProps; }; __isTeleport: true; }' is not assignable to parameter of type 'DefineComponent<TeleportProps, {}, {}, ComputedOptions, MethodOptions, ComponentOptionsMixin, ComponentOptionsMixin, ... 4 more ..., {}>'.
      Type '{ new (): { $props: VNodeProps & TeleportProps; }; __isTeleport: true; }' is not assignable to type 'ComponentPublicInstanceConstructor<{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<{} & { to?: string | RendererElement | null | undefined; disabled?: boolean | undefined; }> & VNodeProps & AllowedComponentProps & ComponentCustomProps, undefined>; ... 10 more ...; $watch(source: string...'.
        Types of property '__isTeleport' are incompatible.
          Type 'true' is not assignable to type 'undefined'.ts(2769)