插槽道具和 typescript，如何处理类型？

Question

我在项目中使用插槽道具。 我有一个以数组作为输入的通用组件。

我的组件：

<script lang="ts">
    export let data: Array<any>;
</script>

<div>
    <!-- some stuff ... -->
    {#each data as item}
        <slot {item} />
    {/each}
    <!-- ... and other stuff ... -->
</div>

呼叫者：

<script lang="ts">
    let myData : Array<MyType> = ...
</script>

<MyComponent data={myData} let:item>
    <li>{item.myVerySpecificField}
</MyComponent>

我无法理解如何强制将项目键入为 MyType。 有任何想法吗？

它按原样工作，但我在编译时没有得到任何检查。

Answer 1

据我所知，通用组件是通过实验实现的，如下所述： https://github.com/dummdidumm/rfcs/blob/ts-typedefs-within-svelte-components/text/ts-typing-props-slots-事件.md

在您的情况下，这将转化为：

我的组件：

<script lang="ts">
  // define a generic
  type T = $$Generic;

  // use that generic
  export let data: Array<T>;
</script>

<div>
  <!-- some stuff ... -->
  {#each data as item}
    <slot {item} />
  {/each}
  <!-- ... and other stuff ... -->
</div>

呼叫者：

<script lang="ts">
  import MyComponent from "./MyComponent.svelte";

  type MyType = { field: "one" | "two" | "three" };

  let myData: Array<MyType> = [
    { field: "one" },
    { field: "two" },
    { field: "three" },
  ];
</script>

<MyComponent data={myData} let:item>
  <li>{item.field}</li>
</MyComponent>

然后应该正确键入item 。