Svelte组件$props类型疑问：不移出接口的Props类型标注方案

你可以用Svelte内置的ComponentProps工具类型直接提取组件的Props类型，不用把组件内部的Props接口移到外部文件。具体写法如下：

修改挂载代码 #

import { mount, $state } from 'svelte';
import { ComponentProps } from 'svelte';
import Comp from './Comp.svelte';

// 通过ComponentProps提取Comp的props类型，绑定给$state变量
const props = $state<ComponentProps<typeof Comp>>({});

const comp = mount(Comp, {
  target: document.getElementById('target')!,
  props: props,
});

props.value = 100; // 此时不会再出现类型错误

原理说明 #

• ComponentProps是Svelte官方提供的类型工具，专门用于从组件类型中提取其props的完整类型定义。
• typeof Comp用于获取组件的构造函数类型，ComponentProps<typeof Comp>会自动解析出你在Comp.svelte内部定义的Props接口类型，包括属性的可选性（比如这里的value?: number）。
• 这种方式不需要改动原组件的代码，内部的Props接口可以继续保留在组件文件中。

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