如何重写SvelteComponent类型以支持未声明的组件属性？

我知道这并非Svelte的常规使用场景，但希望应用中的所有组件都能接收一个未通过export let声明的属性。示例代码如下：

组件示例 #

Hello.svelte #

<script lang="ts">
  export let name;
</script>
<h1>Hello {name}</h1>

Goodbye.svelte #

<script lang="ts">
  export let name;
</script>
<h1>Goodbye {name}</h1>

App.svelte #

<script lang="ts">
  import Hello from './Hello.svelte';
  import Goodbye from './Goodbye.svelte';
</script>
<Hello name="john" special-prop={true} />
<Goodbye name="jack" special-prop={false}  />

此时typescript和svelte-check会针对special-prop报错，需要重写SvelteComponent类型以支持special-prop?: boolean这个全局属性。

解决方案 #

方法1：扩展SvelteComponentTyped类型 #

在项目根目录的src/global.d.ts（SvelteKit项目为src/app.d.ts）中添加以下类型声明：

import type { SvelteComponentTyped } from 'svelte';

declare module 'svelte' {
  interface SvelteComponentTyped<
    Props = Record<string, any>,
    Events = Record<string, any>,
    Slots = Record<string, any>
  > {
    new (options: {
      target: Element | Document | ShadowRoot;
      anchor?: Element;
      props?: Props & { 'special-prop'?: boolean };
      context?: Map<any, any>;
      hydrate?: boolean;
      intro?: boolean;
    }): any;
  }
}

方法2：扩展ComponentProps类型（Svelte 4+） #

如果使用Svelte 4及以上版本，可直接扩展ComponentProps来实现全局属性支持：

declare module 'svelte' {
  interface ComponentProps<T extends Component> {
    'special-prop'?: boolean;
  }
}

后续操作 #

1. 保存声明文件后，重启编辑器或TypeScript语言服务
2. 确保tsconfig.json的include数组包含该声明文件，比如：

{
  "include": ["src/**/*.d.ts", "src/**/*.svelte", "src/**/*.ts"]
}

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