Svelte 5: Discriminating Unions with Type Narrowing doesn't work about svelte HOT 3 CLOSED

Since they are spread tier, topNavItems are unrelated variables to that if, you would set tier somewhere before that if is executed. You would need to do pros.tier and props.topNavItems to keep narrowing.

from svelte.

Closing since this is how TS works (not much we can do here).
You can also use const { tier, topNavItems }: SideBar = $props() if you don't reassign the values. Then TypeScript will be smart enough to infer the relationship, too.

from svelte.

As @jjones315 noted, the problem is the spread into individual properties.
This behaves the same in plain TS: Playground

You can change the props to a single object to retain the the full type like this:

- let { tier, topNavItems }: SideBar = $props()
+ let { ...props }: SideBar = $props()

(The destructuring is still a requirement.)

from svelte.