Typescript Svelte 动态多组件数组

编辑:答复https://svelte.dev/repl/eb7616fd162a4829b14a778c3d1627e4?version=3.48.0

我所说的将导致:

首先，我们有一个按钮:

<button on:click={add}> Add </button>
<div id="columnflexbox">

当我单击它时，应该会发生以下情况:

<button on:click={add}> Add </button>
<!-- This exists in DOM-->
<div id="columnflexbox">

<!-- This div and components get rendered, the Div does not exist in DOM -->
<div class="row" style="display:flex;flex-direction:row">
comp1 (instance1) 
comp2 (instance1)
</div>

再次单击时，会添加另一行(带有新实例):

<div id="columnflexbox">


<div class="row" style="display:flex;flex-direction:row">
comp1 (instance1) 
comp2 (instance1)
</div>
<!-- Second div is generated, it does not exist in DOM, new instances of components -->
<div class="row" style="display:flex;flex-direction:row">
comp1 (instance2)
comp2 (instance2)
</div>


</div>

有一个接口:

export interface complexObject {
    comp1 : ComplexObj1
    comp2: ComplexObj2
}

let row: complexObject[] = []

添加功能:

function add(){        
    let newObj:complexObject = {
        comp1: new Comp1({target: div}), // I have to add a target here, or I get compile error, but how since the element doesn't exist?
        comp2: new Comp2({target: div})
    }

    row.push(newObj);
}

我会使用这种方法，但我不能，因为我在没有添加目标的情况下会出现编译错误:

{#each row as rowitem }

    <div class="row">
        {rowitem.comp1}
        {rowitem.comp2}
    </div>
    
{/each}

编辑:结果表明，当我将目标添加为渲染中指定的html时，样式得到了正确应用，如下所示:

添加功能:

function add(){    
    let div = document.createElement("div");
    div.setAttribute('class',"row")


    let newObj:complexObject = {
        comp1: new Comp1({target: div}),
        comp2: new Comp2({target: div})
    }

    row.push(newObj);
}


{#each row as rowitem }
<div class="row">
        {rowitem.comp1}
        {rowitem.comp2}
</div>    
        

{/each}

现在的问题是组件没有被渲染，我得到的是

[object Object]     [object Object]

当我try 这样渲染时:

  <svelte:component this={rowitem.comp1}>

    </svelte:component>

I get错误:

TypeError: l is not a constructor

如果我try 修改Add函数并删除new个关键字，我会得到以下结果:

Type 'typeof comp1__SvelteComponent_' is missing the following properties from type 'comp1__SvelteComponent_': $$prop_def, $$events_def, $$slot_def, $on, and 5 more.ts(2740)

事实证明，这是指定接口的问题，应该这样指定:

export interface complexObject {
    comp1 : typeof ComplexObj1
    comp2: typeof ComplexObj2
}