Svelte TypeScript提示组件缺少$$prop_def等属性类型报错

这个类型错误本质是Svelte组件的类类型和实例类型混淆导致的：

• 通过import Component1 from './Component1.svelte'导入的Component1，是组件的构造类本身，TS识别到的类型是typeof Component1__SvelteComponent_，也就是类的静态类型。
• 你在接口中写的comp1: Component1，这里的Component1指代的是组件实例化之后的对象类型，也就是Component1__SvelteComponent_，这个类型上自带$$prop_def、$$events_def、$on等实例属性和方法。
  你把构造类本身赋值给要求传入实例类型的字段，TS静态检查时就会判定类型不匹配，抛出提示里的缺失属性错误。
  运行时无异常是因为Svelte的动态组件渲染（<svelte:component>）本来就要求传入组件构造类，你实际业务逻辑写的是对的，仅类型标注和实际用途不匹配，所以不会触发运行时报错。
  另外你代码里还有一处笔误：接口定义名为complexObject，变量标注类型时写的是complexObjects（末尾多了一个s），如果没有额外定义同名类型也会触发额外的类型报错。

根据你存储组件的实际用途二选一即可：

• 如果你存组件是为了做动态组件渲染（也就是后续配合<svelte:component this={xxx} />使用），这也是你当前代码的实际场景，修改接口的类型标注，用typeof取组件类的静态类型即可：

import Component1 from './Component1.svelte';
import Component2 from './Component2.svelte';

interface complexObject {
    comp1: typeof Component1
    comp2: typeof Component2
}

// 修正笔误，类型名和接口名对齐
let newComplexObj: complexObject = {
    comp1: Component1,
    comp2: Component2
}

如果要做通用的组件配置，不绑定具体组件类型，可以用Svelte内置的ComponentType工具类型：

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

interface complexObject {
    comp1: ComponentType<SvelteComponent>
    comp2: ComponentType<SvelteComponent>
}

• 如果你确实要存储组件实例（比如通过bind:this拿到的组件实例引用），那你原来的接口标注是对的，但赋值时不能直接传入导入的组件类，要传入实际生成的实例：

<script lang="ts">
import Component1 from './Component1.svelte';
import Component2 from './Component2.svelte';

interface complexObject {
    comp1: Component1 | null
    comp2: Component2 | null
}

let newComplexObj: complexObject = {
    comp1: null,
    comp2: null
}
</script>

<!-- 组件挂载后会把实例绑定到对应字段上 -->
<Component1 bind:this={newComplexObj.comp1} />
<Component2 bind:this={newComplexObj.comp2} />

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