Provide type-safe values to <option /> when the parent <select /> has its value bound by a typed variable.

[victormihalache]

Describe the problem

The following component

<script lang="ts">
  let typedVariable = $state("value1");
  // If not using runes: `let typedVariable = "";`
</script

<select bind:value={typedVariable}>
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
</select>

should not have any errors. If I were type out the possible values however, the following gives an error, as it should:

<script lang="ts">
  let typedVariable = $state<"value1" | "value2">("value3");
  // If not using runes: `let typedVariable: "value1" | "value2" = "value3";`
</script

<select bind:value={typedVariable}>
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
</select>

But so should this (putting an <option /> element with an illegal value:

<script lang="ts">
  let typedVariable = $state<"value1" | "value2">("value1");
  // If not using runes: `let typedVariable: "value1" | "value2" = "value1";`
</script

<select bind:value={typedVariable}>
  <option value="value1">Value 1</option>
  <!-- Putting illegal value here -->
  <option value="value3">Value 3</option>
</select>

Describe the proposed solution

It would be nice is the svelte compiler would be able to warn you when the bind directive is used with a value and its type is not respected in this case.

The following are the edge-cases I identified where there could be type checking:

1. When an illegal option is used

<script lang="ts">
  let typedVariable = $state<"value1" | "value2">("value1");
  // If not using runes: `let typedVariable: "value1" | "value2" = "value1";`
</script

<select bind:value={typedVariable}>
  <option value="value1">Value 1</option>
  <!-- Putting illegal value here -->
  <option value="value3">Value 3</option>
</select>

2. When a loop includes illegal values

<script lang="ts">
  let typedVariable = $state<"value1" | "value2">("value1");
  // If not using runes: `let typedVariable: "value1" | "value2" = "value1";`

  let values = ["value1", "value3"]
</script

<select bind:value={typedVariable}>
  <!-- Should say that `values` is not assignable to `(typeof typedVariable)[]`  -->
  {#each values as value}
    <option value={value}>{value}</option>
  {/each}
</select>

3. Objects — Although I haven't thought much about this just yet, some type checking to see if the type of the value being put inside the value attribute is "correct" based on the type of the parent's bound variable should be done.

Importance

nice to have