You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This is a SvelteKit project that produces an NPM library package. When the project is built, the dist folder contains:
show(content: string|Snippet): void;
Great so far. Now the class is imported in a Vite + Svelte project by importing it from the built NPM package. The importer declares the following snippet:
TypeScript is now unhappy. The word "overlay" has the squiggly red line and the error says:
Overload 1 of 3, '(content: string | Snippet<[]>): void', gave the following error.
Argument of type '() => ReturnType<import("svelte").Snippet>' is not assignable to parameter of type 'string | Snippet<[]>'.
Type '() => ReturnType<import("svelte").Snippet>' is not assignable to type 'Snippet<[]>'.
So the snippet overlay is typed as a function whose return type is the return type of the Snippet type from svelte, instead of just being a snippet.
Reproduction
Hopefully the above information is enough to reproduce? Do let me know, though.
For me it's caused by the snippet prop's name clashing with HTMLAttributes.
Here's my example:
// DraggableWindow.svelte<scriptlang="ts">importtype{ Snippet }from'svelte';importtype{HTMLAttributes}from'svelte/elements';typeProps=HTMLAtttributes<HTMLDivElement>&{/** Title of the window */title?: Snippet;}// ...</script>
// SettingsWindow.svelte<scriptlang="ts>
importDraggableWindowfrom'../DraggableWindow.svelte';</script>{#snippet title()}<h2>Settings</h2>{/snippet}// ❌ Type '() => ReturnType<import("svelte").Snippet>' is not assignable to type 'string & Snippet<[]>'.<DraggableWindow{title}>...</DraggableWindow>
This is because HTMLAttributes<HTMLDivElement> also has a title attribute:
title?: string|undefined|null;
So the solution is to omit title from HTMLAttributes:
- type Props = HTMLAtttributes<HTMLDivElement> & {+ type Props = Omit<HTMLAtttributes<HTMLDivElement>, "title"> & {
/** Title of the window */
title?: Snippet;
}
Describe the bug
In a class, I have the following overload:
This is a SvelteKit project that produces an NPM library package. When the project is built, the
dist
folder contains:Great so far. Now the class is imported in a Vite + Svelte project by importing it from the built NPM package. The importer declares the following snippet:
Then, this snippet is used in a call to
show()
:TypeScript is now unhappy. The word "overlay" has the squiggly red line and the error says:
So the snippet
overlay
is typed as a function whose return type is the return type of theSnippet
type fromsvelte
, instead of just being a snippet.Reproduction
Hopefully the above information is enough to reproduce? Do let me know, though.
Logs
No response
System Info
Severity
blocking an upgrade
The text was updated successfully, but these errors were encountered: