sveltejs / svelte

web development for the rest of us
https://svelte.dev
MIT License
80.23k stars 4.27k forks source link

Type casting inside reactive blocks causes errors #11527

Open bennymi opened 6 months ago

bennymi commented 6 months ago

Describe the bug

Adding type casting inside a reactive block causes an error. This worked in Svelte 4.

<script lang="ts">

    let anchorEls: HTMLAnchorElement[] = [];

    $: {
        anchorEls = <HTMLAnchorElement[]>Array.from(document.querySelectorAll('a'));
    }
</script>

<a href="#1">1</a>
<a href="#2">2</a>

Reproduction

Svelte 5 Repl

Logs

No response

System Info

-

Severity

annoyance

dummdidumm commented 6 months ago

simpler reproduction. Seems the cast is treated as JSX, wondering if there's an option in the Acorn TS plugin to not do that. Either way, it's best to use as type casts instead, i.e. do

    $: {
        anchorEls = Array.from(document.querySelectorAll('a')) as HTMLAnchorElement[];
    }

instead