How to assign non-string dynamic attributes to a nested component in Svelte?

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.

The problem should be commas, props are separated only by whitespace:

<MySimpleComponent
    index={1}
    paragraphs={[
        'Nisi ab nesciunt sapiente. Et nostrum quo qui quia non.',
        'Aut vel quia vel ducimus eius perferendis.' 
    ]} />

(Whitespace in/around the braces and next to the = should not matter.)

Curly braces pass values verbatim without any conversion. To pass strings one would use quotes around the values with other text or invoke .toString() manually (e.g. index="1").

Note that if a property only contains a {...} expression it will not be converted to a string but again passed verbatim (see this issue for examples).