使用 svelte 将单选组绑定到布尔值

Question

我想创建一个 svelte 组件，导出一个可以绑定的布尔值并表示单选按钮组的状态，如以下代码：

<script lang="ts">
    export let firstSelected = true;
</script>

<input type="radio" bind:group={firstSelected} value={true}/>
<input type="radio" bind:group={firstSelected} value={false}/>

这个问题是 svelte-check 发出错误：

Error: Type 'true' is not assignable to type 'string | number | string[]'. (ts)
Error: Type 'false' is not assignable to type 'string | number | string[]'. (ts)

一个可能的解决方法是使用数字而不是布尔值，但这会改变组件的接口：

<script lang="ts">
    export let firstSelected = 1;
</script>

<input type="radio" bind:group={firstSelected} value={1}/>
<input type="radio" bind:group={firstSelected} value={0}/>

有没有办法在仍然公开可绑定的布尔值的同时解决这个问题？如果不是，有没有办法忽略这个错误？

REPL 示例：https://svelte.dev/repl/b6e9042a1b594f2bb77b1e8e7b38ffe1?version=3.31.2

Answer 1

您可以使用一个数字，例如：

<script lang="ts">
    export let firstSelected = true;
    
    let group
    
    $: group = firstSelected ? 1 : 0
</script>

<input type="radio" bind:group={group} value={1}/>
<input type="radio" bind:group={group} value={0}/>

Answer 2

将另一个数字变量与反应性声明和 on:change 处理程序一起使用可以解决问题：

<script lang="ts">
    export let firstSelected = true;
    
    $: _firstSelected = Number(firstSelected);
    
    function handleChange(e) {
        firstSelected = Boolean(_firstSelected);
    }
</script>

<input type="radio" bind:group={_firstSelected} value={1} on:change={handleChange}/>
<input type="radio" bind:group={_firstSelected} value={0} on:change={handleChange}/>

REPL

Answer 3

这是对 Svelte 工具的一种过于严格的类型化，在最新版本的 Svelte for VS Code (105.9.0) 和 svelte-check (2.2.12) 中有所放松。

Answer 4

这里肯定有一个错误，因为绑定没有转换为布尔值。作为快速修复：

<input type=checkbox on:change={myvar = (myvar === true) ? false : true}>

使用 svelte 将单选组绑定到布尔值

Bind radio group to a boolean value using svelte

typescript

svelte