Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

mount return value incorrectly typed? #14401

Closed
Nearoo opened this issue Nov 22, 2024 · 5 comments
Closed

mount return value incorrectly typed? #14401

Nearoo opened this issue Nov 22, 2024 · 5 comments

Comments

@Nearoo
Copy link

Nearoo commented Nov 22, 2024

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
Copy link
Contributor

webJose commented Nov 22, 2024

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
Copy link
Author

Nearoo commented Nov 22, 2024

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

@webJose
Copy link
Contributor

webJose commented Nov 22, 2024

image

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

@Nearoo
Copy link
Author

Nearoo commented Nov 22, 2024

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
Copy link
Member

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

@dummdidumm dummdidumm closed this as not planned Won't fix, can't repro, duplicate, stale Nov 22, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants