CRA项目导出TS接口时VS Code报错但tsc编译正常是什么原因？

create-react-app默认在tsconfig.json中开启了isolatedModules编译选项，该选项要求所有TS文件都可以被作为独立模块单独编译，不需要依赖其他文件的类型信息，目的是兼容Babel这类单文件转译工具的工作逻辑。
你代码中的MyInterface是TS独有的接口类型，编译为JS时会被完全擦除。你使用的普通export { MyInterface }语法没有明确标注导出内容是类型，单文件转译工具无法判断该导出是会被擦除的类型还是真实存在的JS值，可能会导致运行时导出不存在的错误。
TSC（TS编译器）可以正常编译是因为它会做全项目的类型扫描，能识别到MyInterface是类型会自动处理，但VS Code的实时校验是严格遵循isolatedModules的规则做检查，因此会抛出错误提示。

• 方法1：使用export type语法导出类型
  TS 3.8及以上版本支持专门的类型导出语法，明确告诉编译器当前导出的是类型，转译时会直接擦除，不存在歧义，修改最后一行导出代码即可：

export type { MyInterface }

• 方法2：定义类型时直接导出
  不需要单独写导出语句，在定义接口时直接加export修饰符即可，该写法天然符合isolatedModules的规则：

export interface MyInterface {
  bazz(): void;
}

• 方法3（不推荐）：关闭isolatedModules校验
  如果你的项目不需要兼容单文件转译逻辑，可以在项目根目录的tsconfig.json中，把compilerOptions下的isolatedModules设置为false即可关闭该校验。但create-react-app默认开启该选项是为了匹配自身的构建逻辑，关闭后可能出现构建异常问题，因此不建议使用。

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