When working with a Svelte component that has dynamic attributes which are not strings (such as a number and an array), like in the example of 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}
How can this component be used within another component and specify those attributes inline? Attempting the following code results in an error:
<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 message reads TS 2322:
Type 'string' is not assignable to type 'number'to type string[]). It seems the { } syntax is assuming a string value inside, converting { 1 } to '1' instead of preserving it as a number.
What would be the correct approach to handle this scenario? Thank you.