Svelte中如何对注入的子组件进行类型检查？

可以实现仅允许指定类型子组件注入的需求，以下针对<slot>和<svelte:component>两种场景分别给出解决方案：

一、使用<svelte:component>的编译时类型检查 #

这种方式通过TypeScript实现编译时类型约束，能更早发现错误，无需依赖运行时判断，是更优的方案。

1. 直接约束单个组件类型 #

在Parent.svelte中，直接将传入的组件参数类型指定为允许的组件类型：

<script lang="ts">
  // 导入允许的组件类型
  import type ChildRight from './Child-right.svelte';
  // 约束传入的组件必须是ChildRight类型
  export let childElement: typeof ChildRight;
</script>

<div style="width: 500px; height: 500px; background-color: red;">
  <svelte:component this={childElement} />
</div>

此时如果在App.svelte中传入ChildWrong，TypeScript会直接抛出编译错误，从源头阻止非法组件注入。

2. 约束符合接口的组件（支持多组件场景） #

如果需要允许多个符合特定规范的组件，可以先定义一个标识接口：

// types.ts
export interface AllowedChild {
  // 仅作为类型标识，无需实际赋值
  __isAllowedChild: true;
}

在允许的子组件（如ChildRight.svelte）中声明实现该接口：

<script lang="ts">
  import type { AllowedChild } from './types';
  // 声明组件符合允许的接口规范
  export let __isAllowedChild: true = true;
</script>

<!-- 组件内容 -->

然后在Parent.svelte中约束传入的组件必须实现该接口：

<script lang="ts">
  import type { Component } from 'svelte';
  import type { AllowedChild } from './types';
  // 接受同时满足Component和AllowedChild类型的组件
  export let childElement: Component & AllowedChild;
</script>

<div style="width: 500px; height: 500px; background-color: red;">
  <svelte:component this={childElement} />
</div>

这样所有实现了AllowedChild接口的组件都能通过类型检查，其他组件则会触发编译错误。

二、使用<slot>的类型检查 #

Slot场景下的类型检查需要结合编译时类型声明和运行时校验：

1. 编译时约束（配合svelte-check） #

在Parent.svelte中，通过类型注释约束slot仅接受指定组件：

<script lang="ts">
  import type ChildRight from './Child-right.svelte';
  import type { Slot } from 'svelte';

  // 定义slot的类型为仅允许ChildRight
  type AllowedSlot = Slot<{}, typeof ChildRight>;
</script>

<div style="width: 500px; height: 500px; background-color: red;">
  <!-- 用@type注释约束slot内容类型 -->
  <slot @type={AllowedSlot} />
</div>

当使用svelte-check检查代码时，如果在App.svelte中放入ChildWrong，会直接提示类型不匹配的错误。

2. 运行时校验 #

为了确保运行时的正确性，可以在slot内容变化时校验子组件类型：

<script lang="ts">
  import ChildRight from './Child-right.svelte';

  function handleSlotChange(e: CustomEvent) {
    const slot = e.detail.slot;
    const childComponent = slot.assignedElements()[0];
    // 校验子组件是否为允许的类型
    if (!(childComponent instanceof ChildRight)) {
      throw new Error('Parent组件仅接受ChildRight作为子组件');
    }
  }
</script>

<div style="width: 500px; height: 500px; background-color: red;">
  <slot on:slotchange={handleSlotChange} />
</div>

这样即使编译时检查被绕过，运行时也会抛出错误提示，避免非法组件渲染。

对比硬编码方案 #

你之前的硬编码判断属于运行时校验，而上面的方案优先实现编译时类型检查，能在开发阶段就发现问题，避免运行时异常，是更规范的实现方式。

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