TypeScript常规导入类型后导出报错原因咨询

核心原因：TypeScript类型擦除 + ES模块运行时校验 #

TypeScript编译阶段会完全擦除所有纯类型代码，但ES模块的导入导出语句会被保留到最终的JS文件中——除非TypeScript能明确识别出这是纯类型相关的操作。

1. 为什么Bar.ts正常，Bar2.ts报错？ #

• Bar.ts里的import { Foo } from './foo.js'仅用于类型注解（const foo: Foo = {}），TypeScript能判定这是纯类型导入，编译后会直接删除这条import语句，生成的JS里没有任何相关代码，自然不会触发运行时的模块导入校验。
• Bar2.ts中添加了export { Foo }后，TypeScript无法直接判断你导出的Foo是纯类型还是值（比如class既是类型又是构造函数值），因此会将这条导入保留为普通ES模块导入。编译后的JS代码会变成：

  import { Foo } from './foo.js';
  export { Foo };
  

  但Foo.ts编译后的foo.js里，export type Foo作为纯类型已经被完全擦除，根本不存在Foo这个导出，所以运行时就会抛出找不到导出的语法错误。

2. 为什么import { type Foo }能正常运行？ #

使用import { type Foo }时，你明确告诉TypeScript这是纯类型导入，哪怕后续执行export { Foo }，TypeScript也会把整个导入导出标记为类型操作，编译后会完全擦除这些语句，最终的JS里不会留下任何相关的import/export代码，也就不会触发运行时的模块校验。

3. 解决VSCode自动导入的问题 #

VSCode默认自动导入会优先使用普通导入（不带type），可以通过修改配置让它自动为纯类型生成type导入：
在项目的.vscode/settings.json中添加：

{
  "typescript.preferences.preferTypeOnlyImports": true
}

之后VSCode自动导入纯类型时，会直接生成import { type Foo }的语句，避免手动修改的麻烦。

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