Svelte+TS中如何为Accordion组件组设置类型？

要实现你期望的Accordion+Accordion.Item的使用方式，同时让TypeScript正确识别类型，按以下步骤操作：

1. 基础组件实现 #

先分别写好Accordion.svelte和AccordionItem.svelte的核心逻辑，同时定义各自的Props：

Accordion.svelte #

<script lang="ts">
  // 定义Accordion的Props
  export let openIndex: number | null = 0;
</script>

<div class="accordion">
  <slot />
</div>

AccordionItem.svelte #

<script lang="ts">
  // 定义AccordionItem的Props
  export let title: string;
</script>

<div class="accordion-item">
  <h3>{title}</h3>
  <div class="content">
    <slot />
  </div>
</div>

2. 类型扩展与导出 #

在组件目录下创建index.ts文件，负责合并组件并添加正确的类型标注：

import Accordion from './Accordion.svelte';
import AccordionItem from './AccordionItem.svelte';

// 定义扩展类型：合并原Accordion组件类型与Item属性
type AccordionWithItem = typeof Accordion & {
  Item: typeof AccordionItem;
};

// 给Accordion添加Item属性，并通过类型断言让TS识别扩展后的类型
const ExtendedAccordion = Accordion as AccordionWithItem;
ExtendedAccordion.Item = AccordionItem;

// 导出合并后的组件，对外暴露统一的Accordion名称
export { ExtendedAccordion as Accordion };

3. 使用方式 #

现在可以按你期望的方式导入并使用，TypeScript会自动识别Accordion.Item的类型，不会报错：

<script lang="ts">
  import { Accordion } from '$lib/components/Accordion';
</script>

<Accordion openIndex={1}>
  <Accordion.Item title="第一面板">
    这是第一面板的内容
  </Accordion.Item>
  <Accordion.Item title="第二面板">
    这是第二面板的内容
  </Accordion.Item>
</Accordion>

关键说明 #

Svelte组件的默认导出类型是Component（基于Svelte内部类型），直接给它添加静态属性时TypeScript会因为原类型不包含该属性而报错。通过交叉类型合并+类型断言的方式，我们可以告诉TypeScript：这个Accordion组件不仅有原有的类型，还带有Item这个子组件属性。

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