Typescript > Slot props are treated as const unless the prop is exported

[oodavid]

Describe the bug

TLDR; take a look at the reproduction.

Slot props are treated as const unless the variable is exported.

https://www.loom.com/share/1d8ff3fbd9fc476e8db086f5abcb948c - video

This comparison appears to be unintentional because the types '"one"' and '"two"' have no overlap.js(2367)
const prop: "one"

Reproduction

https://github.com/oodavid/svelte-slot-props/tree/main/src/routes

Logs

No response

System Info

System:
    OS: macOS 13.2.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 148.81 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node
    npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm
  Browsers:
    Chrome: 115.0.5790.114
    Edge: 114.0.1823.67
    Firefox: 114.0.2
    Safari: 16.3
  npmPackages:
    svelte: ^4.0.5 => 4.1.2

Severity

annoyance

[dummdidumm]

From TypeScript's perspective this is correct because nothing is reassigning the slot prop so TS will narrow it to the value you have given it. The problem is, even if you then modify the prop somewhere, TS won't recognize that and widen the type. We work around this in the language server by adding code that forces the type to widen, but we only do that for things we know are reactive, like props or reactive statements. This one's different as it could become reactive if it's mutated, at which point we need to apply the same behavior. I believe Svelte can give us the info which of the things are reactive, so we maybe need to use that info to then apply the force-widening transformation.

[softgripper]

I'm getting this with a fresh sveltekit install with a reactive variable.

It's literally a straight install from https://kit.svelte.dev/ as at 2024/03/12 with this svelte example file put in /src/routes/check.svelte.

<script lang="ts">
  let problem: 'Foo' | 'Bar' = 'Foo';
</script>

{#if problem === 'Bar'}
  It's absolutely got an overlap
{/if}

<select bind:value={problem}>
  <option value="Foo">Foo</option>
  <option value="Bar">Bar</option>
</select>

> check-test@0.0.1 check
> svelte-kit sync && svelte-check --tsconfig ./tsconfig.json


====================================
Loading svelte-check in workspace: /<redact>/Development/Projects/check-test
Getting Svelte diagnostics...

/<redact>/Development/Projects/check-test/src/routes/check.svelte:5:6
Error: This comparison appears to be unintentional because the types '"Foo"' and '"Bar"' have no overlap. (ts)

{#if problem === 'Bar'}
  It's absolutely got an overlap


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

These are my deps

├── @sveltejs/adapter-auto@3.1.1
├── @sveltejs/kit@2.5.3
├── @sveltejs/vite-plugin-svelte@3.0.2
├── @types/eslint@8.56.5
├── @typescript-eslint/eslint-plugin@7.2.0
├── @typescript-eslint/parser@7.2.0
├── eslint-config-prettier@9.1.0
├── eslint-plugin-svelte@2.35.1
├── eslint@8.57.0
├── prettier-plugin-svelte@3.2.2
├── prettier@3.2.5
├── svelte-check@3.6.0
├── svelte@4.2.12
├── tslib@2.6.2
├── typescript@5.4.2
└── vite@5.1.6

npm 10.2.5
node v20.10.0

[dummdidumm]

This sounds related to TypeScript 5.4 - #2313 will add support for it.

[dummdidumm]

Closing as won't fix - snippets will replace slots and don't have this problem