Svelte组件的通用类型是什么？<svelte:component>的this接受何种类型？

通用组件类型 #

你需要使用SvelteComponentConstructor（从svelte包导入）或typeof SvelteComponent作为Svelte组件的通用类型，而非直接使用SvelteComponent。

原因很明确：你导入的Svelte组件本质是组件构造函数，而SvelteComponent是组件实例的类型，二者类型不匹配，这就是替换后触发TypeScript错误的核心原因。

正确代码示例：

import type { SvelteComponentConstructor } from 'svelte';
import RedThing from "./RedThing.svelte";
import GreenThing from "./GreenThing.svelte";

const things: Record<string, SvelteComponentConstructor> = {
  red: RedThing,
  green: GreenThing,
};

也可以用typeof SvelteComponent实现相同效果：

import type { SvelteComponent } from 'svelte';
import RedThing from "./RedThing.svelte";
import GreenThing from "./GreenThing.svelte";

const things: Record<string, typeof SvelteComponent> = {
  red: RedThing,
  green: GreenThing,
};

svelte:component的this属性类型 #

<svelte:component>的this属性接受的正是组件构造函数类型，也就是上述的SvelteComponentConstructor或typeof SvelteComponent。你可以直接将things对象中的成员传入使用：

<script lang="ts">
import type { SvelteComponentConstructor } from 'svelte';
import RedThing from "./RedThing.svelte";
import GreenThing from "./GreenThing.svelte";

const things: Record<string, SvelteComponentConstructor> = {
  red: RedThing,
  green: GreenThing,
};

let currentThing = 'red';
</script>

<svelte:component this={things[currentThing]} />

进阶：约束组件Props类型 #

如果需要对组件的Props做类型约束，可以使用SvelteComponentConstructor<Props>，其中Props是你自定义的属性类型：

type ColorThingProps = { shade: string };
const things: Record<string, SvelteComponentConstructor<ColorThingProps>> = {
  red: RedThing,
  green: GreenThing, // 若GreenThing的Props与ColorThingProps不匹配，TypeScript会直接报错
};

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