typescript 我如何设置一个类型的 prop 在苗条与打字

bjg7j2ky  于 2023-06-07  发布在  TypeScript
关注(0)|答案(1)|浏览(128)

我正在尝试使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)
那么,我如何指定/确保我传递的项属于某个类呢?
感谢您的评分

rjee0c15

rjee0c151#

可能有两种选择:

  • 为组件编写您自己的类型声明,为items使用的项类型和slot属性item定义泛型参数。这需要熟悉svelte包中用于描述组件接口的各种类型。

一个好的起点是检查通过SvelteKit构建组件时生成的类型。您可以使用泛型创建一个组件,并查看如何转换(当前语法应在相应的RFC中描述)。

  • 通过声明类似{@const book = any(item)}的东西来破解它,其中any只是一个函数,它将输入作为any返回,以便可以将其分配给属性。当然,您也可以使用一个更专门的函数,它只是Assert它是一本书。(TS语法目前在模板中不受支持,因此必须将其移动到脚本中的函数中。参见this issue。)

相关问题