For a Svelte component with dynamic attributes which are not strings (i.e. a number and array), for example MySimpleComponent.svelte
:
<script lang="ts">
export let index : number;
export let paragraphs: string[];
</script>
<h3> { index } </h3>
{#each paragraphs as paragraph, i}
<p> { paragraph } </p>
{/each}
What is the correct syntax to place that component in a different component, and specify those attributes inline? I am trying this, but it doesn’t work:
<script lang="ts">
import MySimpleComponent from './MySimpleComponent.svelte';
</script>
<MySimpleComponent
index = { 1 },
paragraphs = {[
'Nisi ab nesciunt sapiente. Et nostrum quo qui quia non.',
'Aut vel quia vel ducimus eius perferendis.'
]},
/>
The error is TS 2322: Type 'string' is not assignable to type 'number'
(or to type string[]
). I assume because the { }
syntax is implicitly expecting a string inside, meaning { 1 }
is really '1'
, not 1
.
What is the correct way to do this? Thanks.