Svelte 5: Typescript type assertion when binding cause syntax error

[HighFunctioningSociopathSH]

Describe the bug

When trying to use type assertion with bind syntax, a syntax error causes a crash.

Reproduction

<svelte:options runes />
<script lang="ts">
  let element = $state<HTMLDivElement>();
</script>

<div bind:this={element as HTMLElement}></div>

The as HTMLElement part causes a syntax error.

Logs

No response

System Info

System:
    OS: Windows 11 10.0.22621
    CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
    Memory: 5.61 GB / 15.63 GB
  Binaries:
    Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
    npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (120.0.2210.133)
    Internet Explorer: 11.0.22621.1
  npmPackages:
    svelte: ^5.0.0-next.34 => 5.0.0-next.34

Severity

blocking an upgrade

[elliott-with-the-longest-name-on-github]

Typescript isn't allowed in the svelte template, so this is expected. 🙃

[brunnerh]

It is valid in Svelte 5.

[HighFunctioningSociopathSH]

Typescript isn't allowed in the svelte template, so this is expected. 🙃

It is in Svelte 5. I've been using it everywhere else in the template. It's one of its best new features.

[HighFunctioningSociopathSH]

@dummdidumm @gtm-nayan
Guys, can you please check this again? I installed versions 38 and 40 of Svelte and still get a syntax error for doing this.
The syntax error is ';' expected.ts(1005)

System:
OS: Windows 11 10.0.22621
CPU: (16) x64 12th Gen Intel(R) Core(TM) i7-12650H
Memory: 6.59 GB / 15.63 GB
Binaries:
Node: 18.14.2 - C:\Program Files\nodejs\node.EXE
npm: 9.7.1 - C:\Program Files\nodejs\npm.CMD
Browsers:
Edge: Chromium (120.0.2210.144)
Internet Explorer: 11.0.22621.1
npmPackages:
svelte: ^5.0.0-next.40 => 5.0.0-next.40

My typescript version is also ^5.3.3

and the code is simple

<svelte:options runes />

<script lang="ts">
  let div = $state<HTMLDivElement>();
</script>

<div bind:this={div as HTMLElement}></div>

[justingolden21]

bind:this={searchInput}

When I do

let searchInput = $state<HTMLInputElement>();

Then it warns me searchInput is possibly undefined when I try to use it

When I do

let searchInput: HTMLInputElement = $state();

Then in the declaration it tells me Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement'

I understand why these occur, but there has to be a correct way of doing this in svelte 5. Had no problems in svelte 4. I either deal with the red squiggle and error in every typescript check in every file, or I check if it's truthy in every call, which I shouldn't have to do since it's already bound to the element and the functions I'm calling are after page load.

[Antonio-Bennett]

@justingolden21 Either do let searchInput = $state() as HTMLInputElement or assert it as non null I think like this let searchInput: HTMLInputElement = $state()!;.

[justingolden21]

let searchInput = $state() as HTMLInputElement

@Antonio-Bennett Thank you so much! This works perfectly. Can't believe I didn't think of this and couldn't find it from anything online or chatgpt 😅 You're a lifesaver! 🙏