Svelte中如何为返回组件的异步函数Prop正确标注类型？

步骤1：导入正确的类型 #

首先从svelte包导入所需的类型定义：

import type { ComponentType, SvelteComponentTyped } from 'svelte';

步骤2：两种可行的类型标注方案 #

方案一：直接标注组件构造函数类型

将icon的类型设为返回组件构造函数的Promise，此时调用组件时需返回模块的default导出（Svelte组件的默认导出才是构造函数）：

// MyComponent.svelte
<script lang="ts">
    import type { ComponentType, SvelteComponentTyped } from 'svelte';
    export let icon: () => Promise<ComponentType<SvelteComponentTyped<any, any, any>>>;
</script>

调用时写法：

<MyComponent icon={() => import('./Logo.svelte').then(mod => mod.default)} />

方案二：标注组件模块类型（无需修改调用方式）

如果不想调整调用代码，可以将类型设为返回包含默认组件导出的模块Promise，后续在组件内部使用时需取出default属性：

// MyComponent.svelte
<script lang="ts">
    import type { ComponentType, SvelteComponentTyped } from 'svelte';
    export let icon: () => Promise<{ default: ComponentType<SvelteComponentTyped<any, any, any>> }>;
    
    // 使用时示例
    async function renderIcon() {
        const iconModule = await icon();
        const IconComponent = iconModule.default;
        // 后续处理IconComponent
    }
</script>

调用时保持原有写法即可：

<MyComponent icon={() => import('./Logo.svelte')} />

错误原因说明 #

你之前遇到的类型不匹配问题，核心是import('./Logo.svelte')返回的是包含组件的模块对象Promise，而非直接的组件构造函数。ComponentType类型对应的是组件构造函数本身，并非整个模块对象，因此需要明确指向模块的default导出才能匹配类型。

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