Better type safety for two way binding
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
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.
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?
Yes. Even though we define value as Date, the value ends up being null
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 */