Блог

Я хочу создать компонент 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

Это была чрезмерно строгая типизация инструментария Svelte, которая смягчена в последней версии Svelte для VS Code (105.9.0) и svelte-check (2.2.12).

Использование другой числовой переменной вместе с объявлением реактивности и 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

Вы можете использовать число, например:

 <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}/>
 

Здесь наверняка есть ошибка, поскольку привязка не преобразуется в логическое значение. В качестве быстрого исправления: проверьте приведенный ниже код

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