Better type safety for two way binding

[probablykasper]

Describe the bug

There's no svelte-check error when binding to a property if the property is a broader type.

To Reproduce

<script lang="ts">
  import MyComponent from './MyComponent.svelte'
  let value: Date
  $: console.log('value:', value)
</script>

<MyComponent bind:value />

MyComponent.svelte:

<script lang="ts">
  export let value: Date | null = null
</script>

{JSON.stringify(value)}

Expected behavior

There should be a type error because value is defined as Date even though it can also be null

System

• OS: macOS
• IDE: VSCode
• Plugin/Package: "Svelte for VSCode", svelte-check, svelte2tsx

[dummdidumm]

This works as expected. Date | null means "you can pass one of the two types in here", so Date is correct.
If it's about JSON.stringify not throwing an error: you probably didn't turn on strict mode in your tsconfig.

[dummdidumm]

Ah wait, do you mean that, because it's a binding, this should check both ways, i.e. that Date | null is also assignable to Date?

[probablykasper]

Yes. Even though we define value as Date, the value ends up being null

[dummdidumm]

Implementation notes:

• only do this for the new transformation
• We need to assign both ways: the variable as an input to the component, the component instance's prop to the variable. Since we can't assign the component to the property since we assign the property to the component during its construction, we also can't have built-in mappings and therefore need to transfer the error in one case to the correct position somehow - maybe through another comment pragma. Code could look something like this: const component = new Component({..., props: {...binding: variable});/* mapMeToX */variable = component.$$prop_def.binding/* endMapMeToX */

[ptrxyz]

Will this still be a problem with Svelte 5? It's a bit dangerously to have the type checker being fine and then .... bam! ... Things break. 😬

[frederikhors]

Will this still be a problem with Svelte 5? It's a bit dangerously to have the type checker being fine and then .... bam! ... Things break. 😬

Yeah, it's annoying but really helpful because I had hundreds of possible errors that I'm fixing right now thanks to svelte-check@4.

[dummdidumm]

Out of curiosity, since you said "hundreds of possible errors" - can you give an example of one such error? Hundreds sounds a bit much, so I just want to make sure that we didn't accidentally create false positives.

[frederikhors]

Out of curiosity, since you said "hundreds of possible errors" - can you give an example of one such error? Hundreds sounds a bit much, so I just want to make sure that we didn't accidentally create false positives.

Not at all. My code was the problem.

Hundreds because my errors were in many components.

90% the bind:value issue with a type string | null in cmp and only string when I was calling the component.

The null is needed because many fields may come as null from the server.

[dummdidumm]

Unfortunately #2477 didn't work out, we had to revert it, therefore reopening. See #2508 for more details

[Malix-Labs]

I don't see #2477 as reverted

[huntabyte]

I don't see #2477 as reverted

It's merged it's just pending a release @Malix-Labs