`mount` return value incorrectly typed?

[Nearoo]

Describe the bug

It appears that tsc doesn't accept the line:

const mounted: MyComponent = mount(MyComponent, { target: div })

with a type error. The following, however, works:

const mounted: MyComponent = mount(MyComponent, { target: div }) as MyComponent

Reproduction

The issue somehow cannot be reproduce in the svelte playground (attempt here), so I've created a repo showcasing the issue: https://github.com/Nearoo/svelte-mount-issue

If you prefer to recreate locally, do:

• npm create vite@latest -> Svelte -> TypeScript
• copy over App.svelte and MyComponent.svelte

Run npm run check, and you'll get the following output:

.../src/App.svelte:7:11
Error: Type '{ sayHello: (name: string) => void; } & { $set?: any; $on?: any; }' is not assignable to type 'SvelteComponent<{ sayHello?: ((name: string) => void) | undefined; }, { [evt: string]: CustomEvent<any>; }, {}> & { $$bindings?: string | undefined; } & { ...; }'.
  Type '{ sayHello: (name: string) => void; } & { $set?: any; $on?: any; }' is missing the following properties from type 'SvelteComponent<{ sayHello?: ((name: string) => void) | undefined; }, { [evt: string]: CustomEvent<any>; }, {}>': $$prop_def, $$events_def, $$slot_def, $destroy (ts)
  onMount(() => {
    const mounted: MyComponent = mount(MyComponent, { target: div })
  })


====================================
svelte-check found 1 error and 0 warnings in 1 file

Logs

No response

System Info

Just posting package.json:

{
  "name": "mount-ts-issue",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^4.0.0",
    "@tsconfig/svelte": "^5.0.4",
    "svelte": "^5.1.3",
    "svelte-check": "^4.0.5",
    "tslib": "^2.8.0",
    "typescript": "^5.6.3",
    "vite": "^5.4.10"
  }
}

Severity

annoyance

[webJose]

What you try to do doesn't sound accurate. The mount function returns an object with just the exports of the component. It doesn't return a component class instance anymore.

[Nearoo]

Okay... how would I type just the exports of a component?

[webJose]

Just let it be auto-typed, like in the screenshot above.

[Nearoo]

That works in the very specific scenario I used above, but I need the type of the component exports for another use case.

I think I found a solution though:

type ComponentExports<T extends Component> =
  T extends Component<any, infer Exports> ? Exports : unknown

thanks for the hint!

[dummdidumm]

Closing because the problem has been solved and there's no Svelte issue here.

[Nearoo]

@dummdidumm Would you be open to merging a PR that adds this type?

I could create one for svelte 5, but I'm not sure how to infer for svelte 4; for our purposes, svelte 5 would be enough.

We're adding the type as I posted it above to our codebase right now - might be useful to others as well.

[dummdidumm]

You could also just do ReturnType<typeof Component>, because it's just that - the thing that's returned after invoking the component function. For that reason we don't want to add that currently.

[Nearoo]

Oh I see, that's easier still, thanks!