Svelte 5动态组件加载：TypeScript报错问题解决咨询

核心适配思路：贴合 Svelte 5 新类型体系，兼容多 props 组件 #

Svelte 5 废弃了原有的 ComponentType，改用 Component 作为组件类型的核心标识，针对大量不同 props 组件的动态加载场景，可通过以下几种方式重构代码：

1. 通用组件类型约束 #

定义一个接受任意 props 结构的通用组件类型，无需为单个组件创建类型别名：

// 适配任意键值对形式的 props
type DynamicComponent = Component<{ [key: string]: unknown }>;

// 使用示例
let activeComponent: DynamicComponent;

async function loadComponent(componentName: string) {
  const module = await import(`./components/${componentName}.svelte`);
  activeComponent = module.default;
}

模板中直接传递 props 即可：

<svelte:component this={activeComponent} {...componentProps} />

2. 依赖类型推断自动适配 #

如果通过组件映射表管理动态组件，用 as const 让 TypeScript 自动推断每个组件的原生 props 类型：

const componentMap = {
  UserCard: import('./UserCard.svelte'),
  ProductList: import('./ProductList.svelte')
} as const;

async function loadComponent(key: keyof typeof componentMap) {
  const module = await componentMap[key];
  activeComponent = module.default;
}

这种方式会保留每个组件的原始 props 类型，TypeScript 自动校验传入的 props 是否匹配，无需额外维护类型别名。

3. 临时类型断言（特殊场景） #

若个别组件需要精确类型校验，可在使用时临时断言 props 类型，不用全局定义别名：

{#if activeComponent === UserCard}
  <svelte:component this={activeComponent} {...componentProps as Parameters<typeof UserCard>[0]} />
{/if}

通过 Parameters<typeof Component>[0] 自动获取组件的 props 类型，避免手动编写。

4. 宽松类型应急方案（不推荐长期使用） #

如果需要快速修复所有错误，可使用 Component<unknown> 作为组件类型，允许任意 props 传入：

let activeComponent: Component<unknown>;

这种方式会跳过 props 类型校验，适合迁移初期快速推进，后续再逐步优化。

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