Svelte组件TypeScript扩展：IntrinsicElements与SvelteHTMLElements选哪个

你希望通过扩展Svelte基础HTML类型提升组件的可扩展性与复用性，目前找到两种restProps的类型定义方式：

两种选项 #

选项1 #

export let restProps: svelteHTML.IntrinsicElements['div'] | undefined = undefined;

选项2 #

export let restProps: SvelteHTMLElements['div'] | undefined = undefined;

你的实现示例 #

// /+page.svelte
<script lang="ts">
  import {MyComponent} from './MyComponent.svelte';
</script>
<MyComponent restProps={{
  class:"some-class",
  "aria-label": "some label",
  "on:mousedown": (e) => console.log(e),
  role: 'button'
}} />

// /MyComponent.svelte
<script lang="ts">
  export let restProps: svelteHTML.IntrinsicElements['button'] | undefined = undefined;
  // OR export let restProps: SvelteHTMLElements['button'] | undefined = undefined;
</script>
<button {...restProps} />

结论：推荐使用svelteHTML.IntrinsicElements #

原因如下：

• 官方原生支持：svelteHTML是Svelte官方提供的命名空间，专门用于定义HTML元素类型，属于框架原生类型系统的一部分，是官方推荐的标准用法。
• 类型稳定性高：SvelteHTMLElements大多是社区或第三方库导出的别名，不同项目的依赖版本、配置可能导致该类型不存在或定义不一致；而svelteHTML.IntrinsicElements在所有Svelte+TypeScript项目中都能直接使用，无兼容性风险。
• 类型匹配精准：svelteHTML.IntrinsicElements直接映射原生HTML元素的所有属性、事件（包括Svelte特有的on:前缀事件），和你将restProps展开到原生HTML元素的场景完全匹配，能提供最精准的类型检查和编辑器提示。
• 未来兼容性好：Svelte后续版本的类型更新会优先维护官方命名空间，使用svelteHTML.IntrinsicElements能更好适配框架迭代，避免因第三方别名变动引发的类型错误。

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