Type safety for two way binding

[seancolsen]

Problem

• Let's say I have a NumberInput.svelte component which accepts user input, somewhat like <input type="number"/>

  <script lang="ts">
    export let value: number | null = null;
  
    // etc...
  </script>
  
  <!-- 
    etc...
  -->

  Notice that value has type number | null because it becomes null when the user clears the contents of the input field.

• Now I use that component inside MyForm.svelte as follows:

  <script lang="ts">
    import NumberInput from './NumberInput.svelte';
  
    let quantity = 1;
  </script>
  
  <NumberInput bind:value={quantity} />
  <!--                     ^^^^^^^^  I would like to see an error here.
  -->

  Here quantity has type number.

• Currently this code does not produce any type errors. That's problematic because the two way binding may set quantity to null at runtime, and it's hard to see that from within MyForm.svelte.

Proposed solution

• I'd like to see a type error at the specified location because quantity has type number whereas value has type number | null.

• I would fix the type error inside MyForm.svelte as follows:

  let quantity: number | null = 1;

Alternate solutions

• Perhaps the type of quantity could be inferred to be number | null. I'm not sure though.
• I'm open to other approaches or other advice on how people have solved similar issues.

[dummdidumm]

Duplicate of #1392 (although I like your title much better, so I updated it in #1392)