SvelteKit导入TypeScript接口提示无对应命名导出报错

这个报错的核心差异来自TypeScript类型构造和值构造的编译区别，以及SvelteKit默认的TS编译规则：

• interface、type 这类声明属于纯类型级语法，TypeScript编译到JavaScript的过程中会被完全擦除，不会生成任何对应的运行时代码，自然也不会存在真实的导出项。
• class 属于类型+值双重构造，编译后会生成真实可运行的JS构造函数，是实际存在的导出值，运行时模块加载能直接找到对应导出，所以不会报错。
• IDE能识别、支持跳转是因为IDE做的是静态类型分析，它能识别到TS源码里的interface声明，不关心编译后运行时是否存在对应实体。

SvelteKit新建项目默认开启verbatimModuleSyntax TS配置，这个配置下TS编译器不会自动分析、擦除未标记的纯类型导入，会把你写的import {Choice} from "$lib/choice"原封不动保留到编译后的JS代码里。运行时浏览器/Node加载模块时，会真的去找choice.ts编译后导出的名为Choice的实际值，而interface早就被擦除了，自然抛出"不存在对应命名导出"的错误。

所有纯类型的导入，显式用type关键字标记即可，告诉编译器这个导入是纯类型引用，编译时直接擦除，不要生成运行时导入逻辑：

<script lang="ts">
    import type { Choice } from "$lib/choice";
</script>

如果是在$lib/choice.ts里用type别名声明，处理逻辑完全一致：

// /src/lib/choice.ts
export type Choice = {
    id: number;
    value: string;
}

导入时同样加type标记就能正常使用。

注意：不要为了规避报错强行把纯类型声明改成class，class会生成额外的运行时代码，纯数据结构类型定义场景下，用interface/type配合type导入才是符合TS规范的写法。

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