TypeScript无法识别Svelte模块导出成员，如何解决？

问题原因 #

TypeScript本身不原生支持解析Svelte文件中<script lang="ts" module>块的命名导出，默认的Svelte类型定义仅处理组件的默认导出逻辑，不会自动识别模块脚本里的命名导出成员，因此会抛出TS2614类型错误。

可行解决方案 #

方案1：自定义Svelte模块类型声明 #

通过扩展.svelte文件的类型定义，让TypeScript识别命名导出：

1. 在项目的类型目录（比如src/types）下创建svelte.d.ts文件
2. 添加以下内容（根据实际导出调整）：

   declare module '*.svelte' {
     import type { ComponentType } from 'svelte';
     // 保留组件默认导出的类型
     const component: ComponentType;
     export default component;
   
     // 声明你需要的命名导出，比如示例中的hello函数
     export function hello(): void;
   
     // 若项目中有大量命名导出，可使用索引签名兼容所有导出（适合快速迭代，但类型不够严谨）
     // [key: string]: any;
   }
   

3. 确保tsconfig.json的include数组包含这个类型文件：

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

方案2：将模块逻辑抽离为独立TS文件（推荐大型项目使用） #

这种方式完全利用TypeScript原生的类型支持，避免维护额外的类型声明：

1. 创建独立的TS文件存放导出逻辑，比如src/lib/hello.ts：

   export function hello() {
     console.log('Hello from module');
   }
   

2. 在Svelte组件的模块脚本中重新导出该函数：

   <script lang="ts" module>
     export { hello } from './hello.ts';
   </script>
   

3. 在index.ts中可以直接从TS文件导入，或者继续从Svelte组件导入——此时TypeScript能正确识别导出成员。

方案对比 #

• 方案1适合少量、固定的命名导出，快速解决类型报错，但需要手动维护类型声明，大型项目中容易遗漏或不一致。
• 方案2更适合大型项目，类型维护成本低，代码结构更清晰，同时兼容Svelte组件的模块导出需求。

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