svelte icon indicating copy to clipboard operation
svelte copied to clipboard

Svelte component won't type with runes

Open gloriousjob opened this issue 3 months ago • 3 comments

Describe the bug

If I try to use bind:this to a Svelte component in my project, the typing for the variable tosses this error when I try to type it using the component name: 'Nested' refers to a value, but is being used as a type here. Did you mean 'typeof Nested'?ts(2749)

This worked in svelte 4 and typeof causes other issues since the component is truly the type. Am I using wrong types? Is there something new needed in svelte 5? The code compiles but I'd rather not have this red in my code.

I noticed some files in my project didn't have issues but it looks like those files didn't migrate to use runes (only had eventDispatchers, which don't migrate). The ones which added $state or $props seem to show the symptom.

Reproduction

https://svelte.dev/playground/6b78d2d389534d72b46ecc02e52ff7bd?version=5.1.3

This is the idea but the REPL doesn't really show the problem. I used npx sv create my-app to create a sveltekit minimal using typescript syntax project, no extras. Then I placed the code in App.svelte in routes/+page.svelte and added Nested.svelte in the same folder.

It tosses this error on the let nestedEl line in +page.svelte: 'Nested' refers to a value, but is being used as a type here. Did you mean 'typeof Nested'?ts(2749)

If I change to typeof Nested, the line is fine but anything else using the variable goes bad.

Logs

No response

System Info

System:
    OS: macOS 15.0.1
    CPU: (8) arm64 Apple M1
    Memory: 94.25 MB / 8.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.9.0 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Brave Browser: 129.1.70.126
    Chrome: 130.0.6723.70
    Safari: 18.0.1
  npmPackages:
    svelte: ^5.0.0 => 5.1.3

Severity

annoyance

gloriousjob avatar Oct 27 '24 01:10 gloriousjob