如何在单个TypeScript文件中导出包含接口的默认对象？

你之前的代码报错，核心原因是**import type导入的类型在编译阶段会被TypeScript完全擦除**，不会出现在最终生成的JS文件里。所以你把AProps、BProps放到默认导出的对象中时，运行时JS找不到这些变量，自然会报错。

要在单个文件里实现“默认导出包含组件和对应类型接口”的需求，你需要把运行时存在的组件和仅在TS层面生效的类型分开处理，同时通过类型断言让TS识别默认导出的对象包含类型：

import A from './A';
import type { AProps } from './A';
import B from './B';
import type { BProps } from './B';

// 定义导出对象的完整类型（包含组件和接口类型）
type ComponentExports = {
  A: typeof A;
  AProps: AProps;
  B: typeof B;
  BProps: BProps;
};

// 仅导出运行时存在的组件，同时通过类型断言让TS识别完整类型
export default { A, B } as ComponentExports;

这样写的好处：

• 运行时：默认导出的对象只有A、B两个实际存在的组件，不会出现变量未定义的错误
• TypeScript层面：你可以通过默认导入的对象直接访问AProps、BProps类型，比如：

  import X from './your-file';
  
  // 使用组件
  const App = () => <X.A />;
  // 使用类型
  type MyAProps = X.AProps;
  

如果你更习惯先做命名导出再聚合为默认导出，也可以在单个文件里这么写：

// 先做命名导出（包含组件和类型）
export { default as A } from './A';
export type { AProps } from './A';
export { default as B } from './B';
export type { BProps } from './B';

// 聚合命名导出为默认导出
const allExports = {
  A,
  B,
} as typeof import('./this-file-name'); // 替换成当前文件的文件名

export default allExports;

这种写法先通过命名导出收集所有内容，再聚合为默认导出，TS同样能识别到allExports包含AProps、BProps类型。

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