我正在尝试使this excellent Svelte virtual list适应Typescript。然而,我不太明白如何确保我传递的变量是特定类型的。下面是相关的原始代码:
<VirtualList items={books} {itemHeight} {containerHeight} {scrollTop} let:item let:dummy let:y>
<div class="book" class:dummy style="top:{y}px;">
{#if !dummy}
#{item.id} - {item.title}
{/if}
</div>
</VirtualList>
如您所见,有let:item
用于传递项。
我想要的是将项目传递给另一个组件,如下所示:
{#if !dummy}
<BookRowEntry {item} /> <!-- where <BookRowEntry/> has: 'export let item: BookClass;`-->
{/if}
这在普通的Javascript中是有效的,但是当我切换到Typescript时,我得到一个错误:
类型“{}”缺少类型“BookClass”中的以下属性:pg,indexts(2739)
那么,我如何指定/确保我传递的项属于某个类呢?
感谢您的评分
1条答案
按热度按时间rjee0c151#
可能有两种选择:
items
使用的项类型和slot属性item
定义泛型参数。这需要熟悉svelte
包中用于描述组件接口的各种类型。一个好的起点是检查通过SvelteKit构建组件时生成的类型。您可以使用泛型创建一个组件,并查看如何转换(当前语法应在相应的RFC中描述)。
{@const book = any(item)}
的东西来破解它,其中any
只是一个函数,它将输入作为any
返回,以便可以将其分配给属性。当然,您也可以使用一个更专门的函数,它只是Assert它是一本书。(TS语法目前在模板中不受支持,因此必须将其移动到脚本中的函数中。参见this issue。)