Svelte 5 snippets parameter 'x' implicitly has an 'any' type

Question

After upgrading to Svelte 5, I tried the new {#snippet ...}. I am getting this type errors, but in the svelte docs it is like they do not exist for them.

{#snippet NavLink(href, text)}
    <a class="text-white" {href}>{text}</a>
{/snippet}

Parameter href implicitly has an any type.

We can fix this issue provisionally by doing this (but I don't like it):

{#snippet NavLink(/** @type {any} */ href)}
    <a class="text-white" {href}>hello</a>
{/snippet}

Is there a better way?

Answer 1

You probably have checkJs enabled in your TypeScript config.

There are various options:

• Disable the option if you don't mind JS and things like Snippet parameters not being type checked.
• Disable the strict/noImplicitAny option.
• Use <script lang="ts"> in the component to allow TS syntax, then you can type the snippet parameters more easily:

  {#snippet NavLink(href: string, text: string)}
      <a class="text-white" {href}>{text}</a>
  {/snippet}