Skip to content

Svelte 5: Types are always required for snippet props if Typescript is used in any component. #13809

@gulbanana

Description

@gulbanana

Describe the bug

I've created a Svelte 5 project and enabled typescript. However, I'm not using lang="ts" in every <script> block. Some components' types are unimportant or can be fully inferred. Unfortunately, this one doesn't compile:

<script>
    let {whom} = $props();
</script>

<p>Hello, {@render whom()}.</p>

Here's a screenshot of the error.
image

If I fully type everything, it works:

<script lang="ts">
    import type { Snippet } from 'svelte';
    let {whom}: {whom: Snippet} = $props();
</script>

<p>Hello, {@render whom()}.</p>

That's a lot of extra boilerplate, though. You've got the type import and then the stuttering destructure. Is it a bug that lang="ts" is required in this case?

Reproduction

  1. Clone https://github.com/gulbanana-bugs/repro-svelte-required-typing
  2. Open in Visual Studio Code or any other editor with Typescript integration.
  3. Observe that Greet2.svelte has an error, but Greet.svelte does not.

Logs

No response

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700
    Memory: 15.64 GB / 31.77 GB
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.19041.4355
  npmPackages:
    svelte: ^5.0.0 => 5.0.5

Severity

annoyance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions