Svelte组件属性能否设置类型？遇导出歧义错误求助

Svelte组件完全支持为属性设置TypeScript类型，你遇到的SyntaxError: ambiguous indirect export: Stage错误并非属性类型本身的问题，而是模块导出/导入的处理冲突导致的。

错误原因 #

这个错误通常发生在ES模块与CommonJS模块交互时，或者打包工具（如Vite、Rollup）对仅包含类型导出的模块处理不当。由于TypeScript接口属于编译时类型，会在编译阶段被擦除，打包工具可能对这类纯类型导出的模块产生识别歧义。

解决方法 #

1. 使用类型导入语法 #

明确标记导入的是TypeScript类型，避免运行时的导出歧义：

<script lang="ts">
    import type { Stage } from './types';

    export let stages: Stage[] = [];
</script>

<div>
    {JSON.stringify(stages)} <!-- 直接渲染对象会显示[object Object]，转成JSON更直观 -->
</div>

2. 检查TypeScript配置 #

确保tsconfig.json的compilerOptions.module设置与打包工具匹配，比如Vite默认使用ES模块，建议设置为：

{
  "compilerOptions": {
    "module": "ESNext",
    "moduleResolution": "bundler"
  }
}

3. 确保打包工具版本兼容 #

如果使用Vite，建议升级到较新版本，它对TypeScript类型导入的支持更完善，能更好处理纯类型模块的导出。

你的types.ts文件无需修改：

export interface Stage {
    id: number;
    title: string;
    value: number;
    deals: number;
}

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