如何向泛型Svelte组件传递TypeScript类型变量？

你可以通过Svelte的$$Generic语法结合类型断言，或者在Svelte 5中直接使用泛型标签来实现，完全不需要额外的seed属性。

方法1：Svelte 4及稳定版 #

组件实现（MyComponent.svelte） #

<script lang="ts">
  import type { Record } from 'pocketbase';

  // 定义泛型T，继承自PocketBase的Record基类
  type T = $$Generic<Record>;

  export let id: string;

  // 调用泛型数据获取函数，返回T类型数据
  const data: T = fetchData<T>(id);

  // 声明插槽的类型，将泛型T传递给外部使用
  interface $$Slots {
    default: { record: T };
  }
</script>

<slot record={data} />

使用组件时指定泛型 #

在使用组件的地方，通过类型断言将组件绑定到你需要的具体类型，不用传任何额外props：

<script lang="ts">
  import type { Record } from 'pocketbase';
  import MyComponent from './MyComponent.svelte';

  // 定义你的自定义Record类型
  interface SomeRecord extends Record {
    name: string;
    age: number;
  }

  // 生成针对SomeRecord类型的组件版本
  const TypedMyComponent = MyComponent as typeof MyComponent & {
    $$prop_def: { id: string };
    $$slot_def: { default: { record: SomeRecord } };
  };
</script>

<TypedMyComponent id="123abc" let:record>
  <!-- 这里record会自动推断为SomeRecord，支持类型提示 -->
  <p>记录ID: {record.id}</p>
  <p>姓名: {record.name}</p>
  <p>年龄: {record.age}</p>
</TypedMyComponent>

方法2：Svelte 5（Beta版，更简洁） #

Svelte 5原生支持在组件标签上直接指定泛型参数，写法和常规TypeScript完全一致：

组件实现（MyComponent.svelte） #

<script lang="ts">
  import type { Record } from 'pocketbase';

  type T = $$Generic<Record>;

  let id: string;

  const data: T = fetchData<T>(id);
</script>

<slot record={data} />

使用组件 #

<script lang="ts">
  import type { Record } from 'pocketbase';
  import MyComponent from './MyComponent.svelte';

  interface SomeRecord extends Record {
    name: string;
  }
</script>

<!-- 直接在标签上指定泛型类型 -->
<MyComponent<SomeRecord> id="123abc" let:record>
  <p>姓名: {record.name}</p>
</MyComponent<SomeRecord>>

临时简化方案（单次使用） #

如果只是单次使用组件，也可以直接在插槽变量上做类型断言，虽然不够优雅但能快速解决问题：

<MyComponent id="123abc" let:record={record as SomeRecord}>
  <p>姓名: {record.name}</p>
</MyComponent>

内容的提问来源于stack exchange，提问作者NachoMuncher22