language-tools
language-tools copied to clipboard
sveltejs
type `svelte:self`
Describe the problem
When you use svelte:self in a typescript component, it seems to not have any type checks
Describe the proposed solution
I would like svelte:self to be typed according to the props in the current component
Alternatives considered
You could always just not use types on svelte:self
Importance
would make my life easier
From a typing perspective that's really tricky because we use the component within its own definition, might very well be that typescript bails out here and we need to find some workaround.
i just spent like an hour debugging only to find out i was passing invalid arguments to svelte:self. recursive stuff like this is typically painful to debug so it would be nice if it was typed.
From a typing perspective that's really tricky because we use the component within its own definition, might very well be that typescript bails out here and we need to find some workaround.
typescript is usually pretty good with handling recursive types, and only really complains in cases where it believes the recursion to be infinite.
i have no idea how svelte component types work under the hood though, but assuming it's something like this, there shouldn't be an issue:
declare class SomeComponent {
constructor(value: number)
self: typeof SomeComponent // no error
}
new (new SomeComponent(1)).self(1) // no error
On the smae note, I'd be very interested if there were a way to access a component's own types, like SvelteAllProps or typeof $$props
I'm working with a lot of tree structures where svelte:self is heavily used and I regularly run into type issues because svelte:self is not typed.
It might be possible. Since slot props are replaced by snippets and the event is replaced by callback props so there's less inferred type. I tried and the prototype seems promising.
svelte:self should probably just be removed in the future.
Self-referential imports are possible and type-checked.
<!-- tree.svelte -->
<script lang="ts">
import Tree from './tree.svelte'; // it's me, the current file!
type TreeItem = {
name: string;
children?: TreeItem[];
};
export let node: TreeItem;
</script>
<div>{node.name}</div>
<div>
{#each node.children ?? [] as child}
<Tree /> <!-- Property 'node' is missing in type '{}' but required in type '{ node: TreeItem; }'. ts(2741) -->
{/each}
</div>
svelte:selfshould probably just be removed in the future. Self-referential imports are possible and type-checked.
Oh nice, I didn't know that. Then I would think it's best to remove svelte:self because it seems redundant.