Guard for non-nullish value nested in store is reset after `#each`

Describe the bug

Strange title I know…

Minimum reproducible example is:

The error only occurs when using a store that contains an object with a field that is optional or | null or | undefined and this field is an object. After #eaching over the foo strings (or even writing {#each [$data.item.foo] as str} when having only a string) the type safety of $data.item is reset and I get an error like in the screenshot. This is even the case when testing like {#if $data?.item?.foo}.

Without the each I get no error.

Reproduction

<script lang="ts">
  import type { Readable } from 'svelte/store';

  let data: Readable<{
    item?: {
      foo: string[];
    };
  }>;
</script>

{#if $data?.item}
  {#each $data.item.foo as str}
    <li>{str}</li>
  {/each}

  <pre>{JSON.stringify($data.item.foo)}</pre>
{/if}

Expected behaviour

Well, typescript should know that the value is still non-nuliish.

System Info

• OS: NixOS
• IDE: VSCodium with official extension Svelte for VS Code (both latest version)

Which package is the issue about?

svelte2tsx

Additional Information, eg. Screenshots

I’m not sure if the problem is with svelte2tsx and I don’t know how to verify this.

The problem seems related to #1341

[dummdidumm]

I played around with this a little, this looks like a TypeScript bug to me. Minimum reproducible in a TS file:

let foo = () => {};
let bar: { a?: { b?: string } } = null as any;

if ((foo(), bar)?.a?.b) {
	(foo(), bar).a.b; // access works
	for (const a of []) {
	}
	(foo(), bar).a.b; // access fails, should work
}

I created https://github.com/microsoft/TypeScript/issues/49111, let’s see what they have to say.

[jasonlyu123]

Yeah. Since it’s an edge case. It probably won’t be prioritised on the typescript side. Let’s see if we can find a way to adjust all the reference-like features. Guess it can be achieved by finding the definition of the $store variable and then running the reference/rename again on the store?